Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

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

Omit the wrapping .form-check for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label). See the forms overview accessibility section for details.

Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed.

Checkbox toggle buttons

Outlined styles

Different variants of .btn, such at the various outlined styles, are supported.