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
        
      

    



    
    

      


        
        


        
        


          
          

            Customize
            
Global options

          



          
          

            
The Bootstrap framework provides a variety of customizable global options through the _variables.scss file. These settings allow you to quickly modify the overall styling by enabling or disabling specific features according to your project needs.

            
Overview of available options

            

              
              
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                true !default;
$enable-rounded:              true !default;
$enable-shadows:              false !default;
$enable-gradients:            false !default;
$enable-transitions:          true !default;
$enable-reduced-motion:       true !default;
$enable-smooth-scroll:        true !default;
$enable-grid-classes:         true !default;
$enable-container-classes:    true !default;
$enable-cssgrid:              false !default;
$enable-button-pointers:      true !default;
$enable-rfs:                  true !default;
$enable-validation-icons:     true !default;
$enable-negative-margins:     false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities:  true !default;

$enable-dark-mode:            true !default;
$color-mode-type:             data !default; // `data` or `media-query`

            

            
Customizing Bootstrap options

            
To customize these settings to your needs, override the default values by copying them into your project's src/scss/_user-variables.scss file and modifying the values accordingly. This approach ensures that your custom configurations are applied throughout the framework.

            
Example of customizing variables

            
Suppose you want to disable rounded corners and shadows, but enable CSS grid support. You would copy the relevant variables into src/scss/_user-variables.scss and adjust them as follows:

            

              
              
// Inside src/scss/_user-variables.scss

$enable-rounded: false;
$enable-shadows: false;
$enable-cssgrid: true;

            

            
Color mode configuration

            
Bootstrap also supports different color modes. By default, the $color-mode-type is set to data, which means the color mode can be toggled via data-bs-theme attributes in HTML. Alternatively, if set to media-query, the color mode will respond to the user's system preferences.

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize