=============
Primary
=============
<div class="form-check form-switch form-check-inline form-switch-primary">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-primary" checked>
<label class="form-check-label" for="form-switch-primary">Primary</label>
</div>

=============
Info
=============

<div class="form-check form-switch form-check-inline form-switch-info">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-info">
<label class="form-check-label" for="form-switch-info">Info</label>
</div>

=============
Success
=============

<div class="form-check form-switch form-check-inline form-switch-success">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-success">
<label class="form-check-label" for="form-switch-success">Success</label>
</div>

=============
Danger
=============

<div class="form-check form-switch form-check-inline form-switch-danger">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-danger">
<label class="form-check-label" for="form-switch-danger">Danger</label>
</div>

=============
Secondary
=============

<div class="form-check form-switch form-check-inline form-switch-secondary">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-secondary">
<label class="form-check-label" for="form-switch-secondary">Secondary</label>
</div>

=============
Warning
=============

<div class="form-check form-switch form-check-inline form-switch-warning">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-warning">
<label class="form-check-label" for="form-switch-warning">Warning</label>
</div>

=============
Dark
=============

<div class="form-check form-switch form-check-inline form-switch-dark">
<input class="form-check-input" type="checkbox" role="switch" id="form-switch-dark">
<label class="form-check-label" for="form-switch-dark">Dark</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-default">
<label class="switch-label" for="form-custom-switch-default">Default</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-checked" checked>
<label class="switch-label" for="form-custom-switch-checked">Checked</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-disabled" disabled>
<label class="switch-label" for="form-custom-switch-disabled">Disabled</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-disabled-checked" checked disabled>
<label class="switch-label" for="form-custom-switch-disabled-checked">Disabled Checked</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-primary" checked>
<label class="switch-label" for="form-custom-switch-primary">Primary</label>
</div>


<div class="switch form-switch-custom switch-inline form-switch-info">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-info">
<label class="switch-label" for="form-custom-switch-info">Info</label>
</div>


<div class="switch form-switch-custom switch-inline form-switch-success">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-success">
<label class="switch-label" for="form-custom-switch-success">Success</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-warning">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-warning">
<label class="switch-label" for="form-custom-switch-warning">Warning</label>
</div>


<div class="switch form-switch-custom switch-inline form-switch-secondary">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-secondary">
<label class="switch-label" for="form-custom-switch-secondary">Secondary</label>
</div>


<div class="switch form-switch-custom switch-inline form-switch-danger">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-danger">
<label class="switch-label" for="form-custom-switch-danger">Danger</label>
</div>


<div class="switch form-switch-custom switch-inline form-switch-dark">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-dark">
<label class="switch-label" for="form-custom-switch-dark">Dark</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom slim-toggle">
<div class="input-checkbox">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-slim" checked>
</div>
<label class="switch-label" for="form-custom-switch-slim">Slim</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom material-toggle">
<div class="input-checkbox">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-primary-ss" checked>
</div>
<label class="switch-label" for="form-custom-switch-primary-ss">Rounded</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-text-toggle">
<div class="input-checkbox">
<span class="switch-chk-label label-left">ON</span>
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-text" checked>
<span class="switch-chk-label label-right">OFF</span>
</div>
<label class="switch-label" for="form-custom-switch-inner-text">Inner Text</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-icon-toggle">
<div class="input-checkbox">
<span class="switch-chk-label label-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg></span>
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-icon" checked>
<span class="switch-chk-label label-right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path></svg></span>
</div>
<label class="switch-label" for="form-custom-switch-inner-icon">Inner Icon</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-icon-circle-toggle">
<div class="input-checkbox">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-circular-inner-icon" checked>
</div>
<label class="switch-label" for="form-custom-switch-circular-inner-icon">Circlular Icon</label>
</div>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom dual-label-toggle">
<label class="switch-label switch-label-left" for="form-custom-switch-dual-label">Monthly</label>
<div class="input-checkbox">
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-dual-label" checked>
</div>
<label class="switch-label switch-label-right" for="form-custom-switch-dual-label">Yearly</label>
</div>

<br/>
<br/>

<div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-label-toggle show">
<div class="input-checkbox">
<span class="switch-chk-label label-left">OFF</span>
<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-label" onchange="this.checked ? this.closest('.inner-label-toggle').classList.add('show') : this.closest('.inner-label-toggle').classList.remove('show')" checked>
<span class="switch-chk-label label-right">ON</span>
</div>
</div>