Skip to main content

Checks and Radios in Bootstrap 5

Bootstrap Chekboxes​

Checkboxes can be created using the <input> element with the type="checkbox" attribute.

You can also use Bootstrap's custom CSS classes to style and enhance the checkboxes.

As an example:

Editor

In the above example:

  • The checkboxes are created using the <input> element with the type="checkbox" attribute.
  • The checkboxes are wrapped inside <div class="form-check"> for proper styling.
  • Each checkbox has a unique id attribute, and the associated <label> elements use the for attribute to associate with the respective checkboxes.

Bootstrap Radio Button​

The radio buttons can be created using the <input> element with the type="radio" attribute.

You can also use Bootstrap's custom CSS classes to style and enhance the radio buttons.

As an example:

Editor

In the above example:

  • The radio buttons are created using the <input> element with the type="radio" attribute.
  • The radio buttons belong to the same group because they all have the same name attribute value.
  • The name attribute is used to associate radio buttons together in a group, allowing only one selection at a time.
  • Each radio button has a unique id attribute, and the associated <label> elements use the for attribute to associate with the respective radio buttons.