Bootstrap Form Checkbox and Radio

Browser default checkbox and radio are replaced with the help of .form-check class for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency.

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

You have to add class .form-check-input to <input> element and .form-check-label to <label> element.

For example,

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

 

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive