Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            
              Bootstrap docs
              
            
            
Accordion

            
Vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

          



          
          

            
Basic example

            

              
              

                
    
                  
                  
                

                

                  

                    

                      

                        

                          
                        

                        

                          
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                    

                  

                  

                    

                      
                      
<!-- Basic accordion example -->
<div class="accordion" id="accordionExample">

  <!-- Item (expanded) -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingOne">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #1</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #2</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingThree">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #3</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>
</div>

                    

                  

                

              

            

          



          
          

            
Alternative button icon

            

              
              

                
    
                  
                  
                

                

                  

                    

                      

                        

                          
                        

                        

                          
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                    

                  

                  

                    

                      
                      
<!-- Accordion with alternative button icon -->
<div class="accordion accordion-alt-icon" id="accordionExample">

  <!-- Item (expanded) -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingOne">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #1</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #2</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingThree">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #3</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>
</div>

                    

                  

                

              

            

          



          
          

            
With icons

            

              
              

                
    
                  
                  
                

                

                  

                    

                      

                        

                          
                        

                        

                          
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                    

                  

                  

                    

                      
                      
<!-- Accordion example with icons -->
<div class="accordion" id="accordionExample">

  <!-- Item (expanded) -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingOne">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fi-bell fs-lg pe-1 me-2"></i>
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #1</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <i class="fi-edit fs-lg pe-1 me-2"></i>
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #2</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingThree">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThreeAlt" aria-expanded="false" aria-controls="collapseThreeAlt">
        <i class="fi-lock fs-lg pe-1 me-2"></i>
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #3</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseThreeAlt" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>
</div>

                    

                  

                

              

            

          



          
          

            
Sizing

            

              
              

                
    
                  
                  
                

                

                  

                    

                      

                        

                          
                        

                        

                          
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                      

                        

                          
                        

                        

                          
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                        

                      

                    

                  

                  

                    

                      
                      
<!-- Alternate the size of accordion button and body text with fs- (font-size) utility classes -->
<div class="accordion" id="accordionExample">

  <!-- Item (expanded) -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingOne">
      <button type="button" class="accordion-button fs-5" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #1</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body fs-base">This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingTwo">
      <button type="button" class="accordion-button fs-5 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #2</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body fs-base">This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>

  <!-- Item -->
  <div class="accordion-item">
    <h3 class="accordion-header" id="headingThree">
      <button type="button" class="accordion-button fs-5 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <span class="hover-effect-underline stretched-link me-2">Accordion Item #3</span>
      </button>
    </h3>
    <div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body fs-base">This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.</div>
    </div>
  </div>
</div>

                    

                  

                

              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize