Form Check and Radios
Checkboxes
<!-- Default -->
<div class="form-check mb-5">
<input class="form-check-input" type="checkbox" value="" id="check-default">
<label class="form-check-label" for="check-default">
Default state
</label>
</div>
<!-- Checked -->
<div class="form-check mb-5">
<input checked class="form-check-input" type="checkbox" value="" id="check-checked">
<label class="form-check-label" for="check-checked">
Checked state
</label>
</div>
<!-- Default disabled -->
<div class="form-check mb-5">
<input disabled class="form-check-input" type="checkbox" value="" id="check-default-disabled">
<label class="form-check-label" for="check-default-disabled">
Default disabled state
</label>
</div>
<!-- Default checked disabled -->
<div class="form-check mb-0">
<input disabled checked class="form-check-input" type="checkbox" value="" id="check-checked-disabled">
<label class="form-check-label" for="check-checked-disabled">
Checked disabled state
</label>
</div>
Radios
<!-- Default -->
<div class="form-check mb-5">
<input class="form-check-input" type="radio" value="" id="radio-default">
<label class="form-check-label" for="radio-default">
Default state
</label>
</div>
<!-- Checked -->
<div class="form-check mb-5">
<input checked class="form-check-input" type="radio" value="" id="radio-checked">
<label class="form-check-label" for="radio-checked">
Checked state
</label>
</div>
<!-- Default disabled -->
<div class="form-check mb-5">
<input disabled class="form-check-input" type="radio" value="" id="radio-default-disabled">
<label class="form-check-label" for="radio-default-disabled">
Default disabled state
</label>
</div>
<!-- Default checked disabled -->
<div class="form-check mb-0">
<input disabled checked class="form-check-input" type="radio" value="" id="radio-checked-disabled">
<label class="form-check-label" for="radio-checked-disabled">
Checked disabled state
</label>
</div>
Switches
<!-- Switch default -->
<div class="form-check form-switch mb-5">
<input class="form-check-input" type="checkbox" role="switch" id="check-switch-default">
<label class="form-check-label" for="check-switch-default">Default switch checkbox input</label>
</div>
<!-- Switch checked -->
<div class="form-check form-switch mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="check-switch-default">
<label class="form-check-label" for="check-switch-default">Checked switch checkbox input</label>
</div>
<!-- Switch default disabled -->
<div class="form-check form-switch mb-5">
<input disabled class="form-check-input" type="checkbox" role="switch" id="check-switch-default">
<label class="form-check-label" for="check-switch-default">Default switch checkbox input disabled</label>
</div>
<!-- Switch checked disabled -->
<div class="form-check form-switch mb-0">
<input disabled checked class="form-check-input" type="checkbox" role="switch" id="check-switch-default">
<label class="form-check-label" for="check-switch-default">Checked switch checkbox input disabled</label>
</div>
Colors
<!-- Checkbox primary -->
<div class="form-check form-check-primary mb-5">
<input checked class="form-check-input" type="checkbox" id="check-default-primary">
<label class="form-check-label" for="check-default-primary">Primary</label>
</div>
<!-- Checkbox secondary -->
<div class="form-check form-check-secondary mb-5">
<input checked class="form-check-input" type="checkbox" id="check-default-secondary">
<label class="form-check-label" for="check-default-secondary">Secondary</label>
</div>
<!-- Checkbox success -->
<div class="form-check form-check-success mb-5">
<input checked class="form-check-input" type="checkbox" id="check-default-success">
<label class="form-check-label" for="check-default-success">Success</label>
</div>
<!-- Checkbox warning -->
<div class="form-check form-check-warning mb-5">
<input checked class="form-check-input" type="checkbox" id="check-default-warning">
<label class="form-check-label" for="check-default-warning">Warning</label>
</div>
<!-- Checkbox danger -->
<div class="form-check form-check-danger mb-5">
<input checked class="form-check-input" type="checkbox" id="check-default-danger">
<label class="form-check-label" for="check-default-danger">Danger</label>
</div>
<!-- Checkbox info -->
<div class="form-check form-check-info mb-0">
<input checked class="form-check-input" type="checkbox" id="check-default-info">
<label class="form-check-label" for="check-default-info">Info</label>
</div>
<!-- Radio primary -->
<div class="form-check form-check-primary mb-5">
<input checked class="form-check-input" type="radio" id="radio-default-primary">
<label class="form-check-label" for="radio-default-primary">Primary</label>
</div>
<!-- Radio secondary -->
<div class="form-check form-check-secondary mb-5">
<input checked class="form-check-input" type="radio" id="radio-default-secondary">
<label class="form-check-label" for="radio-default-secondary">Secondary</label>
</div>
<!-- Radio success -->
<div class="form-check form-check-success mb-5">
<input checked class="form-check-input" type="radio" id="radio-defaulsuccess">
<label class="form-check-label" for="radio-default-success">Success</label>
</div>
<!-- Radio warning -->
<div class="form-check form-check-warning mb-5">
<input checked class="form-check-input" type="radio" id="radio-default-warning">
<label class="form-check-label" for="radio-default-warning">Warning</label>
</div>
<!-- Radio danger -->
<div class="form-check form-check-danger mb-5">
<input checked class="form-check-input" type="radio" id="radio-default-danger">
<label class="form-check-label" for="radio-default-danger">Danger</label>
</div>
<!-- Radio info -->
<div class="form-check form-check-info mb-0">
<input checked class="form-check-input" type="radio" id="radio-default-info">
<label class="form-check-label" for="radio-default-info">Info</label>
</div>
<!-- Switch primary -->
<div class="form-check form-switch form-check-primary mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-default-primary">
<label class="form-check-label" for="radio-default-primary">Primary</label>
</div>
<!-- Switch secondary -->
<div class="form-check form-switch form-check-secondary mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-default-secondary">
<label class="form-check-label" for="radio-default-secondary">Secondary</label>
</div>
<!-- Switch success -->
<div class="form-check form-switch form-check-success mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-defaulsuccess">
<label class="form-check-label" for="radio-default-success">Success</label>
</div>
<!-- Switch warning -->
<div class="form-check form-switch form-check-warning mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-default-warning">
<label class="form-check-label" for="radio-default-warning">Warning</label>
</div>
<!-- Switch danger -->
<div class="form-check form-switch form-check-danger mb-5">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-default-danger">
<label class="form-check-label" for="radio-default-danger">Danger</label>
</div>
<!-- Switch info -->
<div class="form-check form-switch form-check-info mb-0">
<input checked class="form-check-input" type="checkbox" role="switch" id="switch-default-info">
<label class="form-check-label" for="radio-default-info">Info</label>
</div>