Switch

The Switch component is slightly modified to make it more beautiful

Custom Switch

Wrap input with class .custom-control.custom-switch .

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

Result:

Colored Switch

Wrap input with class .custom-control.custom-switch & .custom-control-{colorName} .

<div class="custom-control custom-control-primary custom-switch">
  <p class="mb-50">Primary</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch3" />
  <label class="custom-control-label" for="customSwitch3"></label>
</div>

<div class="custom-control custom-control-secondary custom-switch">
  <p class="mb-50">Secondary</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch44" />
  <label class="custom-control-label" for="customSwitch44"></label>
</div>

<div class="custom-control custom-control-success custom-switch">
  <p class="mb-50">Success</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch4" />
  <label class="custom-control-label" for="customSwitch4"></label>
</div>

<div class="custom-control custom-control-danger custom-switch">
  <p class="mb-50">Danger</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch5" />
  <label class="custom-control-label" for="customSwitch5"></label>
</div>

<div class="custom-control custom-control-warning custom-switch">
  <p class="mb-50">Warning</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch7" />
  <label class="custom-control-label" for="customSwitch7"></label>
</div>

<div class="custom-control custom-control-info custom-switch">
  <p class="mb-50">Info</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch6" />
  <label class="custom-control-label" for="customSwitch6"></label>
</div>

<div class="custom-control custom-control-dark custom-switch">
  <p class="mb-50">Dark</p>
  <input type="checkbox" checked class="custom-control-input" id="customSwitch8" />
  <label class="custom-control-label" for="customSwitch8"></label>
</div>

Result:

Class	Value	Description
.custom-control-{colorName}	primary / secondary / success / danger / warning / info	To get the desired color of switch.

Icon Switch

Wrap icons with class .custom-control-label to get switch with icons.

<div class="custom-control custom-switch">
  <p class="mb-50">Primary</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch10" checked />
  <label class="custom-control-label" for="customSwitch10">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-secondary">
  <p class="mb-50">Secondary</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch11" checked />
  <label class="custom-control-label" for="customSwitch11">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-success">
  <p class="mb-50">Success</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch111" checked />
  <label class="custom-control-label" for="customSwitch111">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-danger">
  <p class="mb-50">Danger</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch12" checked />
  <label class="custom-control-label" for="customSwitch12">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-warning">
  <p class="mb-50">Warning</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch14" checked />
  <label class="custom-control-label" for="customSwitch14">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-info">
  <p class="mb-50">Info</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch13" checked />
  <label class="custom-control-label" for="customSwitch13">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

<div class="custom-control custom-switch custom-switch-dark">
  <p class="mb-50">Dark</p>
  <input type="checkbox" class="custom-control-input" id="customSwitch15" checked />
  <label class="custom-control-label" for="customSwitch15">
    <span class="switch-icon-left"><i data-feather="check"></i></span>
    <span class="switch-icon-right"><i data-feather="x"></i></span>
  </label>
</div>

Result: