Bootstrap 5 Carousel Dark variant

Last Updated : 25 Jul, 2024

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
                             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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                             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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                             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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
                             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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                             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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                             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

Bootstrap 5 Carousel Custom Transition

21mcsrltd

Improve

Article Tags :

Bootstrap 5 Carousel Dark variant

Similar Reads

Thank You!

What kind of Experience do you want to share?