Open In App

Bootstrap 5 Carousel With Captions

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Carousel With captions means we can add a class carousel-caption to the carousel items to add a caption for them.

Bootstrap 5 Carousel With Captions Class:

  • carousel-caption: This class is used for giving carousel captions.

Syntax

<div class="carousel-caption">
      ...
</div>

Example 1: In this example, we will learn about Carousel with Captions.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
    <script src=
            integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous">
    </script>
</head>
  
<body class="m-2 text-center">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Bootstrap 5 Carousel With Captions</h3>
        <div id="GFG" class="carousel slide 
            carousel-fade" data-ride="carousel">
  
            <!-- The slideshow -->
            <div class="carousel-inner">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src=
                             height="400px" width="400px" 
                             alt="Java" class="d-block w-100">
                        <div class="carousel-caption">
                            <p>GeeksforGeeks Java Caption</p>
                        </div>
                    </div>
  
                    <div class="carousel-item">
                        <img src=
                             height="400px" width="400px" 
                             alt="HTML" class="d-block w-100">
                        <div class="carousel-caption">
                            <p>GeeksforGeeks HTML Caption</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src=
                             height="400px" width="400px" 
                             alt="Angular" class="d-block w-100">
                        <div class="carousel-caption">
                            <p>GeeksforGeeks Angular Caption</p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#GFG" data-slide="prev">
                <span class="carousel-control-prev-icon">
                </span>
            </a>
            <a class="carousel-control-next" href="#GFG" data-slide="next">
                <span class="carousel-control-next-icon">
                </span>
            </a>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will learn how to give styling like using a heading or changing font color in captions.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
    <script src=
            integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous">
    </script>
</head>
  
<body class="m-2 text-center">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Bootstrap 5 Carousel With Captions</h3>
        <div id="GFG" class="carousel slide 
            carousel-fade" data-ride="carousel">
              
            <!-- The slideshow -->
            <div class="carousel-inner">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src=
                            height="400px" width="400px" 
                            alt="Java" class="d-block w-100">
                        <div class="carousel-caption">
                            <h3 style="color:red">
                               GeeksforGeeks Java Caption
                            </h3>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <img src=
                            height="400px" width="400px" 
                            alt="HTML" class="d-block w-100">
                        <div class="carousel-caption">
                             <h3 style="color:red">
                                GeeksforGeeks HTML Caption
                             </h3>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src=
                            height="400px" width="400px" 
                            alt="Angular" class="d-block w-100" >
                        <div class="carousel-caption">
                            <h3 style="color:yellow">
                                GeeksforGeeks Angular Caption
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev"
                href="#GFG" data-slide="prev">
                <span class="carousel-control-prev-icon">
                </span>
            </a>
            <a class="carousel-control-next"
                href="#GFG" data-slide="next">
                <span class="carousel-control-next-icon">
                </span>
            </a>
        </div>
    </div>
</body>
</html>


Output:

 

References: https://getbootstrap.com/docs/5.0/components/carousel/#with-captions



Last Updated : 23 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads