Open In App

How to Change Bootstrap Accordion Background Color ?

Last Updated : 22 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Accordion is an essential part of modern web development that allows users to organize and present content in a structured manner. In Bootstrap, there are different types of accordions present that can be used to make beautiful UI. It has a feature of collapse to hide the additional information and expand to show the information.

Syntax:

<div class="accordion" id="myAccordion">
    <div class="accordion-item bg-warning">
        <h2 class="accordion-header" id="header1">
            ...
        </h2>
        <div id="panel1Collapse" 
                 class="accordion-collapse collapse show"
                 aria-labelledby="panel1Heading">
            <div class="accordion-body">
                This is the content for first Panel.
            </div>
        </div>
    </div>
    <!-- Add your more panels here -->
</div>

Using Bootstrap border classes, bg-success, and bg-info

  • Make the basic structure of the web page using Bootstrap and HTML. <h1> and <h2> are two heading elements to define the heading and sub-heading of the web page.
  • The main content of the web page is wrapped inside the element having the class “container”. The container class is used to give responsiveness to the web page by providing the fixed width to the container and it fits well in all the screen sizes.
  • The utility class “bg-success” is used to make the background green for the first item when we click to expand and the class “text-light” is used to give the color to the text.
  • The utility class bg-info is used to color the background for the second item when we click to expand.

Example: In this example, we will change the Background color of the Accordion using Bootstrap border classes; bg-success, and bg-info classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Accordion Example</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
      <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">
        How to Change Bootstrap Accordion Background Color
    </h2>
    <div class="container mt-5">
        <div class="accordion accordion-flush mt-4 " 
             id="accordionExample">
            <div class="accordion-item 
                        bg-success text-light">
                <h2 class="accordion-header" 
                    id="headingTwo">
                    <button class="accordion-button collapsed" 
                            type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#collapseTwo" 
                            aria-expanded="false" 
                            aria-controls="collapseTwo">
                        C++
                    </button>
                </h2>
                <div id="collapseTwo" 
                     class="accordion-collapse collapse" 
                     aria-labelledby="headingTwo"
                     data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        C++ is a high level programming
                        language used for developing
                        applications, games, etc.
                    </div>
                </div>
            </div>
            <div class="accordion-item 
                        bg-info
                        text-light">
                <h2 class="accordion-header " 
                    id="headingOne">
                    <button class="accordion-button collapsed" 
                            type="button" 
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" 
                            aria-expanded="false" 
                            aria-controls="collapseOne">
                        Java
                    </button>
                </h2>
                <div id="collapseOne"
                     class="accordion-collapse collapse" 
                     aria-labelledby="headingOne"
                     data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Java is a programming language
                        that is used in modern
                        development worldwide.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


Recording-2023-10-03-at-235428


Using CSS to style .accordion-body class


    

  • Make the basic structure of the web page using Bootstrap and HTML. <h1> and <h2> are two heading elements to define the heading and sub-heading of the web page.
    • 

  • The main content of the web page is wrapped inside the element having the class “container”. The container class is used to give responsiveness to the web page by providing the fixed width to the container and it fits well in all the screen sizes.
    • 

  • With the help of Internal CSS write <style> element inside the <head> element. Select the element with the help of class accordian-body and give the background-color property green inside it. It will be applied to both items.
    • 



Example: In this example, we are going to use CSS to style the .accordion-body class.






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Accordion Example</title> 


    <link rel="stylesheet" href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 


<script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> 


    </script> 


    <style> 


        .accordion-body { 


            background-color: green; 


            color: white 


        } 


    </style> 


</head> 


  


<body> 


    <h1 class="text-success text-center"> 


        GeeksforGeeks 


    </h1> 


  


    <h2 class="text-center"> 


        How to Change Bootstrap 


        Accordion Background Color 


    </h2> 


  


    <div class="container mt-5"> 


        <div class="accordion accordion-flush mt-4 " 


             id="accordionExample"> 


            <div class="accordion-item "> 


                <h2 class="accordion-header " 


                    id="headingTwo"> 


                    <button class="accordion-button collapsed" 


                            type="button" 


                            data-bs-toggle="collapse"


                            data-bs-target="#collapseTwo" 


                            aria-expanded="false" 


                            aria-controls="collapseTwo"> 


                        C++ 


                    </button> 


                </h2> 


  


                <div id="collapseTwo" 


                     class="accordion-collapse collapse" 


                     aria-labelledby="headingTwo"


                     data-bs-parent="#accordionExample"> 


                    <div class="accordion-body"> 


                        C++ is a high level programming 


                        language used for developing 


                        applications, games, etc. 


                    </div> 


                </div> 


            </div> 


  


            <div class="accordion-item "> 


                <h2 class="accordion-header" 


                    id="headingOne"> 


                    <button class="accordion-button collapsed" 


                            type="button"


                            data-bs-toggle="collapse"


                            data-bs-target="#collapseOne" 


                            aria-expanded="false" 


                            aria-controls="collapseOne"> 


                        Java 


                    </button> 


                </h2> 


                <div id="collapseOne" 


                     class="accordion-collapse collapse" 


                     aria-labelledby="headingOne"


                     data-bs-parent="#accordionExample"> 


                    <div class="accordion-body"> 


                        Java is a programming language 


                        that is used in modern 


                        development worldwide. 


                    </div> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Recording-2023-10-04-at-001344


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to add background color to a div in Bootstrap ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to change text color depending on background color using JavaScript?
            

        
    
        
            

                How to change the “checked” background color of toggle switch in Bootstrap 4?
            

        
    
        
            

                How to change background color of table rows or individual cells in Bootstrap ?
            

        
    
        
            

                How to automatically close all collapsible elements inside of the accordion when closing the accordion?
            

        
    
        
            

                How to create Nested Accordion using Google AMP amp-accordion?
            

        
    
        
            

                How to create Auto-collapsing accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Animated accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Comparison accordion using Google AMP amp-accordion ?
            

        
    
        
            

                Angular PrimeNG Accordion Properties for Accordion
            

        
    
        
            

                How to change (-, +) symbol with a button in Bootstrap Accordion ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        abhiisaxena09                                

                            

                            

            
                                

                            

                                                                    

                                        
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