Open In App

Bootstrap 5 Carousel Dark variant

Last Updated : 08 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 


          rel="stylesheet"


        integrity= 


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 


          crossorigin="anonymous"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Carousel Disable Touch Swiping
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Carousel Custom Transition
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React-Bootstrap Carousel Dark variant
            

        
    
        
            

                Bootstrap 5 Carousel Individual .carousel-item interval
            

        
    
        
            

                Image Carousel using react-native-snap-carousel package
            

        
    
        
            

                Bootstrap 5 Close button White variant
            

        
    
        
            

                Bootstrap 5 Dropdowns Dark dropdowns
            

        
    
        
            

                React-Bootstrap Dark dropdowns
            

        
    
        
            

                How to Create a Bootstrap Dark Theme without Duplicating CSS ?
            

        
    
        
            

                Bootstrap 5 Dark Mode
            

        
    
        
            

                Creating a Dark Mode for Websites using HTML Bootstrap & JavaScript
            

        
    
        
            

                Bootstrap 4 | Carousel
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        21mcsrltd                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox