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 the <input> element and .form-check-label to the <label> element.

For example,

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

Switches

Add the .form-switch class to render a toggle switch.

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

Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role.

Inline

By default, any number of checkboxes and radios are vertically stacked and appropriately spaced with .form-check.

You can group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.