Checkbox, Radio & Switch
Checkbox
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox2" checked>
<label class="form-check-label" for="checkbox2">Checkbox</label>
</div>
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox3" disabled>
<label class="form-check-label" for="checkbox3">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox4" checked disabled>
<label class="form-check-label" for="checkbox4">Checkbox</label>
</div>
</div>
Radio
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioSet1" id="radio1">
<label class="form-check-label" for="radio1">Radio</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioSet1" id="radio2" checked>
<label class="form-check-label" for="radio2">Radio</label>
</div>
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioSet2" id="radio3" disabled>
<label class="form-check-label" for="radio3">Radio</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioSet2" id="radio4" checked disabled>
<label class="form-check-label" for="radio4">Radio</label>
</div>
</div>
Switch
<div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch1">
<label class="form-check-label" for="switch1">Switch</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch2" checked>
<label class="form-check-label" for="switch2">Switch</label>
</div>
</div>
<div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch3" disabled>
<label class="form-check-label" for="switch3">Switch</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch4" checked disabled>
<label class="form-check-label" for="switch4">Switch</label>
</div>
</div>
Square Switch
<div>
<div class="form-check form-switch form-switch-square">
<input class="form-check-input" type="checkbox" id="switch5">
<label class="form-check-label" for="switch5">Switch</label>
</div>
<div class="form-check form-switch form-switch-square">
<input class="form-check-input" type="checkbox" id="switch6" checked>
<label class="form-check-label" for="switch6">Switch</label>
</div>
</div>
<div>
<div class="form-check form-switch form-switch-square">
<input class="form-check-input" type="checkbox" id="switch7" disabled>
<label class="form-check-label" for="switch7">Switch</label>
</div>
<div class="form-check form-switch form-switch-square">
<input class="form-check-input" type="checkbox" id="switch8" checked disabled>
<label class="form-check-label" for="switch8">Switch</label>
</div>
</div>
Material Design Switch
<div>
<div class="form-check form-switch form-switch-material">
<input class="form-check-input" type="checkbox" id="switch9">
<label class="form-check-label" for="switch9">Switch</label>
</div>
<div class="form-check form-switch form-switch-material">
<input class="form-check-input" type="checkbox" id="switch10" checked>
<label class="form-check-label" for="switch10">Switch</label>
</div>
</div>
<div>
<div class="form-check form-switch form-switch-material">
<input class="form-check-input" type="checkbox" id="switch11" disabled>
<label class="form-check-label" for="switch11">Switch</label>
</div>
<div class="form-check form-switch form-switch-material">
<input class="form-check-input" type="checkbox" id="switch12" checked disabled>
<label class="form-check-label" for="switch12">Switch</label>
</div>
</div>
We are aware that the documentation is incomplete. While we work on it, You may refer to
Bootstrap docs
or help us by
contributing.