Bootstrap Switches
Copy
<!-- Default switch --><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"><label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label></div><!-- Checked switch --><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked><label class="form-check-label" for="flexSwitchCheckChecked">Checked switch</label></div><!-- Disabled switch --><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled><label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch</label></div><!-- Disabled checked switch --><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled><label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch</label></div>Colorful Switches
Copy
<!-- Success switch --><div class="form-check form-switch"><input class="form-check-input form-check-success" type="checkbox" id="successSwitch" checked><label class="form-check-label" for="successSwitch">Success switch</label></div><!-- Warning switch --><div class="form-check form-switch"><input class="form-check-input form-check-warning" type="checkbox" id="warningSwitch" checked><label class="form-check-label" for="warningSwitch">Warning switch</label></div><!-- Danger switch --><div class="form-check form-switch"><input class="form-check-input form-check-danger" type="checkbox" id="dangerSwitch" checked><label class="form-check-label" for="dangerSwitch">Danger switch</label></div><!-- Info switch --><div class="form-check form-switch"><input class="form-check-input form-check-info" type="checkbox" id="infoSwitch" checked><label class="form-check-label" for="infoSwitch">Info switch</label></div><!-- Light switch --><div class="form-check form-switch"><input class="form-check-input form-check-light" type="checkbox" id="lightSwitch" checked><label class="form-check-label" for="lightSwitch">Light switch</label></div><!-- Dark switch --><div class="form-check form-switch"><input class="form-check-input form-check-dark" type="checkbox" id="darkSwitch" checked><label class="form-check-label" for="darkSwitch">Dark switch</label></div>