Switch

Bootstrap switch / Bootstrap toggle

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap switch/toggle is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

It's mostly used in a number of various forms since they are very simple to use and cut the time one needs to fill all the inputs.

Examples of Bootstrap switch use:

  • Forms
  • On/Off Functionality
  • Preference choice

Default switch

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Edit in sandbox 
        
            

            <!-- Default switch -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitches">
              <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
            </div>

Material switch MDB Pro component

Material Design styling for the Bootstrap Switch component

Edit in sandbox 
        
            

            <!-- Material switch -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox">
                <span class="lever"></span> On
              </label>
            </div>

Checked state

Add the checked attribute to the <input> element to pre-select the switch when the page loads.

The checked attribute is a boolean attribute.

Default switch

Edit in sandbox 
        
            

            <!-- Default checked -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
              <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
            </div>

Material switch MDB Pro component

Edit in sandbox 
        
            

            <!-- Material checked -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox" checked>
                <span class="lever"></span> On
              </label>
            </div>

Disabled state

Add the disabled boolean attribute to the <input> element and the custom indicator and the label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default switch

Edit in sandbox 
        
            

            <!-- Default disabled -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitch2" disabled>
              <label class="custom-control-label" for="customSwitch2">Toggle this switch element</label>
            </div>

Material switch MDB Pro component

Edit in sandbox 
        
            

            <!-- Material disabled -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox" disabled>
                <span class="lever"></span> On
              </label>
            </div>