Bootstrap 5 Carousel Dark variant
Bootstrap 5 Carousel Dark variant is by default, controls, indicators, and captions have white colors. But, for Darker controls, indicators, and captions, we can add a class carousel-dark to the carousel.
Used class:
- carousel-dark: This class is used to include the dark variant for the carousel container.
Syntax:
<div id="GFG" class="carousel carousel-dark"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." >
</div>
</div>
</div>Example 1: In this example, we will see, how carousel-dark can invert properties of indicators and controls
HTML
<!DOCTYPE html><html> <head> <!-- Bootstrap CDN --> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script></head> <body> <div class="text-center container"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Carousel Dark Variant</strong> <div id="GFG" class="carousel carousel-dark slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-inner"> <div class="carousel-item active"> <img src= height="400px" width="400px" alt="Bootstrap" class="d-block w-100"> <div class="carousel-caption"> <p>GeeksforGeeks Bootstrap Tutorial</p> </div> </div> <div class="carousel-item"> <img src= height="400px" width="400px" alt="React" class="d-block w-100"> <div class="carousel-caption"> <p>GeeksforGeeks React Tutorial</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 Tutorial</p> </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> </div></body> </html> |
Output:
Example 2: In this example, we will see, how the carousel-dark class can invert the properties of captions.
HTML
<!DOCTYPE html><html> <head> <!-- Bootstrap CDN --> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script></head> <body> <div class="text-center container"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Carousel Dark Variant</strong> <div id="GFG" class="carousel carousel-dark slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="5000"> <img src= height="400px" width="400px" alt="Bootstrap" class="d-block w-100"> <div class="carousel-caption"> <p>GeeksforGeeks Bootstrap Tutorial</p> </div> </div> <div class="carousel-item"> <img src= height="400px" width="400px" alt="React" class="d-block w-100"> <div class="carousel-caption"> <p>GeeksforGeeks React Tutorial</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 Tutorial</p> </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> </div></body> </html> |
Output:
References: https://getbootstrap.com/docs/5.0/components/carousel/#dark-variant
Please Login to comment...