Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
Checkboxes and radios are improved upon with the help of .form-check
. Disabled checkboxes and radios are supported, you’ll need to add the .disabled
class to the parent .form-check
.
<div class="form-check">
<input id="checkbox1" class="form-check-input" type="checkbox" checked>
<label class="form-check-label" for="checkbox1">
Option one is this and checked
</label>
</div>
<div class="form-check">
<input id="checkbox2" class="form-check-input" type="checkbox">
<label class="form-check-label" for="checkbox2">
Option two is this and that
</label>
</div>
<div class="form-check disabled">
<input id="checkbox3" class="form-check-input" type="checkbox" disabled>
<label class="form-check-label" for="checkbox3">
Option three is disabled
</label>
</div>
<div class="form-check">
<input id="radios1" class="form-check-input" type="radio" name="radios">
<label class="form-check-label" for="radios1">
Option one is this and that
</label>
</div>
<div class="form-check">
<input id="radios1" class="form-check-input" type="radio" name="radiosdesc">
<label class="form-check-label" for="radios1">
Option one is this and that
</label>
</div>
</div>
Switch to inline, only add .form-check-inline
.
<div class="form-check-inline">
<input id="inlineCheckbox" class="form-check-input" type="checkbox">
<label class="form-check-label" for="inlineCheckbox">
Option one
</label>
</div>
<div class="form-check-inline">
<input id="inlineRadios1" class="form-check-input" type="radio" name="inlineRadios">
<label class="form-check-label" for="inlineRadios1">
Option one
</label>
</div>
Switch to inline card visual, only add .check-card-outline
.
<div class="flex-md flex-nowrap flex-md-row">
<div class="form-check-inline check-card-outline flex-item">
<input id="checkCardOutline1" class="form-check-input" type="checkbox" checked>
<label class="form-check-label" for="checkCardOutline1">
<span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
<span class="form-check-title">GitHub</span>
<span class="form-check-description">GitHub is a web-based hosting service for version control using git. It is mostly used for computer code.</span>
</label>
</div>
<div class="form-check-inline check-card-outline flex-item">
<input id="checkCardOutline3" class="form-check-input" type="checkbox" disabled>
<label class="form-check-label" for="checkCardOutline3">
<span class="icon icon-brand-github icon-4x mb-1 icon-muted"></span>
<span class="form-check-title">Bitbucket</span>
<span class="form-check-description">Bitbucket is a web-based version control repository hosting service owned by Atlassian.</span>
</label>
</div>
</div>
Switch to inline card visual, only add .check-card-outline
.
<div class="flex-md flex-nowrap flex-md-row">
<div class="form-check-inline check-card-outline flex-item">
<input id="radioCardOutline1" class="form-check-input" type="radio" name="radioCard" checked>
<label class="form-check-label" for="radioCardOutline1">
<span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
<span class="form-check-title">GitHub</span>
<span class="form-check-description">GitHub is a web-based hosting service for version control using git.</span>
</label>
</div>
<div class="form-check-inline check-card-outline flex-item">
<input id="radioCardOutline2" class="form-check-input" type="radio" name="radioCard">
<label class="form-check-label" for="radioCardOutline2">
<span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
<span class="form-check-title">GitHub</span>
<span class="form-check-description">GitHub is a web-based hosting service for version control using git.</span>
</label>
</div>
<div class="form-check-inline check-card-outline flex-item">
<input id="radioCardOutline3" class="form-check-input" type="radio" name="radioCard" disabled>
<label class="form-check-label" for="radioCardOutline3">
<span class="icon icon-brand-github icon-4x mb-1 icon-muted"></span>
<span class="form-check-title">Bitbucket</span>
<span class="form-check-description">Bitbucket is a web-based version control repository hosting service owned by Atlassian.</span>
</label>
</div>
</div>
Switch to inline button visual, only add .check-btn-outline
.
<div class="form-check-inline check-btn-outline">
<input id="checkBtnOutline" class="form-check-input" type="checkbox" checked>
<label class="form-check-label" for="checkBtnOutline">
<img src="/assets/svg/sprite-umbler/img-umblercoin-silver.svg" width="30" height="30" class="mr-2">
Option one
</label>
</div>
<div class="form-check-inline check-btn-outline">
<input id="radioBtnOutline" class="form-check-input" type="radio" name="radioBtnOutline">
<label class="form-check-label" for="radioBtnOutline">
<span class="icon icon-brand-github icon-2x text-muted"></span>
GitHub
</label>
</div>
Add .check-btn-outline-sm
.
<div class="form-check-inline check-btn-outline check-btn-outline-sm">
<input id="radioBtnOutline1" class="form-check-input" type="radio" name="radioBtnOutline">
<label class="form-check-label" for="radioBtnOutline1">
<span class="icon icon-brand-github icon-2x text-muted"></span>
GitHub
</label>
</div>
Initialize all form check buttons on a dynamically loaded page.
$(function () {
$(".check-btn-outline .form-check-input").checkButtonOutline();
})
Should you have no text within the <label>
. Currently only works on non-inline checkboxes and radios. Provide some form of label for assistive technologies (for instance, using aria-label
).
<div class="form-check">
<input id="radioNolabel1" class="form-check-input" type="radio" name="radioNolabel" aria-label="...">
<label class="form-check-label" for="radioNolabel1"></label>
</div>
<div class="form-check">
<input id="radioNolabel2" class="form-check-input" type="radio" name="radioNolabel" aria-label="...">
<label class="form-check-label" for="radioNolabel2"></label>
</div>