Checkboxes and radios
Choose many, or one
Checkboxes
Code
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-0" checked><label class="form-check-label" for="chk-0">Email me about mentions</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-1" checked><label class="form-check-label" for="chk-1">Weekly summary</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="chk-2"><label class="form-check-label" for="chk-2">Product news</label></div>With descriptions
Code
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-d1" checked><label class="form-check-label" for="chk-d1">Public profile<small class="d-block text-label-3">Anyone in the workspace can see it</small></label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-d2"><label class="form-check-label" for="chk-d2">Show activity<small class="d-block text-label-3">Your recent work appears on your profile</small></label>
</div>Radios
Code
<div class="form-check"><input class="form-check-input" type="radio" name="cycle" id="rad-0"><label class="form-check-label" for="rad-0">Monthly</label></div>
<div class="form-check">
<input class="form-check-input" type="radio" name="cycle" id="rad-1" checked><label class="form-check-label" for="rad-1">Yearly</label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="cycle" id="rad-2"><label class="form-check-label" for="rad-2">Two years</label></div>