Switches
On or off, right away
Settings
Code
<div class="setting-row">
<label class="text" for="sw-1"><b>Notifications</b><small>Alerts on this device</small></label>
<div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="sw-1" checked aria-label="Notifications"></div>
</div>
<div class="setting-row">
<label class="text" for="sw-2"><b>Dark mode</b><small>Easier on the eyes at night</small></label>
<div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="sw-2" aria-label="Dark mode"></div>
</div>
With labels
Code
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="sw-3" checked><label class="form-check-label" for="sw-3">Wi-Fi</label>
</div>
<div class="form-check form-switch form-switch-accent">
<input class="form-check-input" type="checkbox" role="switch" id="sw-4" checked><label class="form-check-label" for="sw-4">Accent colour</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="sw-5" disabled><label class="form-check-label" for="sw-5">Disabled</label>
</div>