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.

Toggle Switch

.custom-switch
On / Off
Off / On
Disabled 
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

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

Outline

.custom-switch-outline
On / Off
Off / On
Disabled

Square

.custom-switch-square
On / Off
Off / On
Disabled