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
              
            
            
Tabs

            
Horizontally or vertically stacked list of items. When clicked each item switch content in the tab pane.

          



          
          

            
Button-like style

            

              
              

                
    
                  
                  
                

                

                  

                    
    
                      
                      
                      
                      
                    

                    

                      

                        This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Disabled tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                    

                  

                  

                    

                      
                      
<!-- Nav tabs -->
<ul class="nav nav-tabs mb-3" role="tablist" style="max-width: 450px">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab">...</div>
</div>

                    

                  

                

              

            

          



          
          

            
Underline style

            

              
              

                
    
                  
                  
                

                

                  

                    
    
                      
                      
                      
                      
                    

                    

                      

                        This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                      

                        This is some placeholder content the Disabled tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
                      

                    

                  

                  

                    

                      
                      
<!-- Nav tabs (underline) -->
<ul class="nav nav-underline mb-3" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab">...</div>
</div>

                    

                  

                

              

            

          



          
          

            
Vertical alignment

            

              
              

                
    
                  
                  
                

                

                  

                    

                      
    
                        
                        
                        
                        
                      

                      
    
                        
                        
                        
                        
                      

                    

                  

                  

                    

                      
                      
<!-- Vertical button-like tabs -->
<ul class="nav nav-tabs flex-column" role="tablist" style="width: 150px">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>

<!-- Vertical underline tabs -->
<ul class="nav nav-underline flex-column" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>

                    

                  

                

              

            

          



          
          

            
With icons and dropdowns

            

              
              

                
    
                  
                  
                

                

                  
                  

                    

                      
                      
<!-- Button-like tabs -->
<ul class="nav nav-tabs" role="tablist" style="max-width: 420px">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" href="#" data-bs-toggle="tab" role="tab" aria-selected="true">
      <i class="fi-home me-2 ms-n1"></i>
      Home
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
      <i class="fi-user me-2 ms-n1"></i>
      Profile
    </a>
  </li>
  <li class="nav-item dropdown" role="presentation">
    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">
      Dropdown
    </a>
    <ul class="dropdown-menu">
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          First tab link
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          Second tab link
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          Third tab link
        </a>
      </li>
    </ul>
  </li>
</ul>

<!--Underline tabs -->
<ul class="nav nav-underline" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" href="#" data-bs-toggle="tab" role="tab" aria-selected="true">
      <i class="fi-home me-2"></i>
      Home
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
      <i class="fi-user me-2"></i>
      Profile
    </a>
  </li>
  <li class="nav-item dropdown" role="presentation">
    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">
      Dropdown
    </a>
    <ul class="dropdown-menu">
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          First tab link
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          Second tab link
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          Third tab link
        </a>
      </li>
    </ul>
  </li>
</ul>

                    

                  

                

              

            

          



          
          

            
Shapes

            

              
              

                
    
                  
                  
                

                

                  

                    
    
                      
                      
                      
                      
                    

                    
    
                      
                      
                      
                      
                    

                    
    
                      
                      
                      
                      
                    

                  

                  

                    

                      
                      
<!-- Rounded (default) tabs -->
<ul class="nav nav-tabs mb-4" role="tablist" style="max-width: 450px">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>


<!-- Pill shaped tabs -->
<ul class="nav nav-tabs rounded-pill mb-4" role="tablist" style="max-width: 450px">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-pill active" data-bs-toggle="tab" role="tab" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>


<!-- Square shaped tabs -->
<ul class="nav nav-tabs rounded-0 mb-4" role="tablist" style="max-width: 450px">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-0 active" data-bs-toggle="tab" role="tab" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false">
      Contact
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
      Disabled
    </button>
  </li>
</ul>

                    

                  

                

              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize