Bootstrap 4 Switch

Bootstrap 4 Switch form component

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

Basic Bootstrap 4 version

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

Above is an example template for a Switch in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version




Edit in sandbox 
        
            
      <!-- Default switch -->
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
      </div>

      <!-- Checked switch -->
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked />
        <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
      </div>

      <!-- Default disabled switch -->
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled />
        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
      </div>

      <!-- Checked disabled switch -->
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled />
        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
      </div>