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">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Cartzilla
          v3.1.1
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            
              Bootstrap docs
              
            
            
Spinners

            
Indicate the loading state of a component or page.

          



          
          

            
Border spinner

            

              
              

                
    
                  
                  
                

                

                  

                    
                    
                    
                    
                    
                    
                    
                    
                    

                      
                    

                    

                      
                    

                  

                  

                    

                      
                      
<!-- Default spinner -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Gray spinner -->
<div class="spinner-border text-body-tertiary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Primary spinner -->
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Secondary spinner -->
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Success spinner -->
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Danger spinner -->
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Warning spinner -->
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Info spinner -->
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Light spinner -->
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Dark spinner -->
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

                    

                  

                

              

            

          



          
          

            
Growing spinner

            

              
              

                
    
                  
                  
                

                

                  

                    
                    
                    
                    
                    
                    
                    
                    
                    

                      
                    

                    

                      
                    

                  

                  

                    

                      
                      
<!-- Default spinner -->
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Gray spinner -->
<div class="spinner-grow text-body-tertiary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Primary spinner -->
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Secondary spinner -->
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Success spinner -->
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Danger spinner -->
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Warning spinner -->
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Info spinner -->
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Light spinner -->
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Dark spinner -->
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

                    

                  

                

              

            

          



          
          

            
Sizing

            

              
              

                
    
                  
                  
                

                

                  

                    

                      
                      
                    

                    

                      
                      
                    

                  

                  

                    

                      
                      
<!-- Small border spinner -->
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Small growing spinner -->
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Custom size border spinner -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Custom size growing spinner -->
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

                    

                  

                

              

            

          



          
          

            
Inside button

            

              
              

                
    
                  
                  
                

                

                  

                    
                    
                    
                    
                  

                  

                    

                      
                      
<!-- Button with border spinner -->
<button type="button" class="btn btn-primary btn-icon pe-none">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<!-- Button with border spinner and text -->
<button type="button" class="btn btn-primary pe-none">
  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>

<!-- Button with growing spinner -->
<button type="button" class="btn btn-outline-secondary btn-icon pe-none">
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<!-- Button with growing spinner and text -->
<button type="button" class="btn btn-outline-secondary pe-none">
  <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>

                    

                  

                

              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize