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

Output:

Example 2: In this example, we will see, how the carousel-dark class can invert the properties of captions.

Output:

References: https://getbootstrap.com/docs/5.0/components/carousel/#dark-variant