Basic Switch

<div class="custom-control custom-switch custom-control-inline"><input type="checkbox"class="custom-control-input"id="customSwitch2"checked=""><label class="custom-control-label"for="customSwitch2">Active Switch</label></div><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">Inactive Switch </label></div><div class="custom-control custom-switch custom-control-inline"><input type="checkbox"class="custom-control-input"disabled checked=""id="customSwitch3"><label class="custom-control-label"for="customSwitch3">Disabled Active Switch</label></div><div class="custom-control custom-switch custom-control-inline"><input type="checkbox"class="custom-control-input"disabled id="customSwitch4"><label class="custom-control-label"for="customSwitch4">Disabled Inactive Switch</label></div>

Text

<div class="custom-control custom-switch custom-switch-text custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Primary </p><input type="checkbox"class="custom-control-input"id="customSwitch-11"checked=""><label class="custom-control-label"for="customSwitch-11"data-on-label="On"data-off-label="Off"></label></div></div><div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Success </p><input type="checkbox"class="custom-control-input bg-success"id="customSwitch-22"checked=""><label class="custom-control-label"for="customSwitch-22"data-on-label="Tr"data-off-label="Fal"></label></div></div><div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Danger </p><input type="checkbox"class="custom-control-input bg-danger"id="customSwitch-33"checked=""><label class="custom-control-label"for="customSwitch-33"data-on-label="Yes"data-off-label="No"></label></div></div>

Primary

Success

Danger

Color

<div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-primary"id="customSwitch01"checked=""><label class="custom-control-label"for="customSwitch01">Primary</label></div><div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-success"id="customSwitch02"checked=""><label class="custom-control-label"for="customSwitch02">Success</label></div><div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-danger"id="customSwitch03"checked=""><label class="custom-control-label"for="customSwitch03">Danger</label></div><div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-waring"id="customSwitch04"checked=""><label class="custom-control-label"for="customSwitch04">Waring</label></div><div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-dark"id="customSwitch05"checked=""><label class="custom-control-label"for="customSwitch05">Dark</label></div><div class="custom-control custom-switch custom-switch-color custom-control-inline"><input type="checkbox"class="custom-control-input bg-info"id="customSwitch06"checked=""><label class="custom-control-label"for="customSwitch06">Info</label></div>

Icon

<div class="custom-control custom-switch custom-switch-icon custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Primary </p><input type="checkbox"class="custom-control-input"id="customSwitch-1"checked=""><label class="custom-control-label"for="customSwitch-1"><span class="switch-icon-left"><i class="fa fa-check"></i></span><span class="switch-icon-right"><i class="fa fa-check"></i></span></label></div></div><div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Success </p><input type="checkbox"class="custom-control-input bg-success"id="customSwitch-2"checked=""><label class="custom-control-label"for="customSwitch-2"><span class="switch-icon-left"><i class="fa fa-check"></i></span><span class="switch-icon-right"><i class="fa fa-check"></i></span></label></div></div><div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Danger </p><input type="checkbox"class="custom-control-input bg-danger"id="customSwitch-3"checked=""><label class="custom-control-label"for="customSwitch-3"><span class="switch-icon-left"><i class="fa fa-times"></i></span><span class="switch-icon-right"><i class="fa fa-times"></i></span></label></div></div><div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Warning </p><input type="checkbox"class="custom-control-input bg-warning"id="customSwitch-4"checked=""><label class="custom-control-label"for="customSwitch-4"><span class="switch-icon-left"><i class="fa fa-exclamation-triangle"></i></span><span class="switch-icon-right"><i class="fa fa-exclamation-triangle"></i></span></label></div></div><div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Dark </p><input type="checkbox"class="custom-control-input bg-dark"id="customSwitch-5"checked=""><label class="custom-control-label"for="customSwitch-5"><span class="switch-icon-left"><i class="fa fa-thumb-tack"></i></span><span class="switch-icon-right"><i class="fa fa-thumb-tack"></i></span></label></div></div><div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline"><div class="custom-switch-inner"><p class="mb-0">Info </p><input type="checkbox"class="custom-control-input bg-info"id="customSwitch-6"checked=""><label class="custom-control-label"for="customSwitch-6"><span class="switch-icon-left"><i class="fa fa-info"></i></span><span class="switch-icon-right"><i class="fa fa-info"></i></span></label></div></div>

Primary

Success

Danger

Warning

Dark

Info