Bootstrap 5 Carousel With Captions
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
Please Login to comment...