Switch

Switch is a way to toggle a feature.

Default

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1"></label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" checked id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2"></label>
</div>

Disabled

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch3">
  <label class="custom-control-label" for="customSwitch3"></label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled checked id="customSwitch4">
  <label class="custom-control-label" for="customSwitch4"></label>
</div>

Hint Text

Enabling this will send emails to your account

<div class="custom-switch-container">
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch5">
    <label class="custom-control-label" for="customSwitch5"></label>
  </div>
  <div class="custom-switch-hint mt-3">Enabling this will send emails to your account</div>
</div>

Horizontal label

Label

<div class="custom-control custom-switch required">
  <input type="checkbox" class="custom-control-input" id="customSwitch6">
  <label class="custom-control-label pl-3" for="customSwitch6"><span>Label</span></label>
</div>