Bootstrap 5 Checkboxes

Bootstrap 5 Checkboxes are used when there are lists of possibilities, and the user can choose from one or more than one selection. In other words, bootstrap 5 checkboxes in the list are independent of the others; thus, clicking one box does not uncheck the others.

Bootstrap 5 Checkboxes are used when you want the user to choose from a list of predefined alternatives.

Default Checkbox

Bootstrap 5 default checkboxes show unchecked and non-disabled in the form. Bootstrap 5 checkboxes are used in the form of multiple selections of the single input element. It is a user interaction function and independent from each other.

Syntax

The following syntax shows us to create bootstrap 5 checkbox in form.

Example

• Use a wrapper element with the class="form-check" to ensure suitable label and checkbox margins to style checkboxes.
• Then, add the ".form-check-label" and ".form-check-input" classes used to label elements and show checkboxes. It places inside of the ".form-check" class of the container.
• We can use the following example and its output to show bootstrap 5 checkboxes.

Output

Checked Checkbox

If we want the checkbox to be checked by default, use the checked property in the checkbox input element.

Syntax

The following syntax shows us to create bootstrap 5 checked checkbox by default in form.

Example

The first three checkboxes check by default using the "checked" keyword. The last checkbox shows unchecked by default.

Output

Disabled Checkbox

If we want the checkbox to be disabled by default, use the disabled property in the checkbox input element.

Syntax

The following syntax shows us to create bootstrap 5 disabled checkbox in form.

Example

The following example shows disabled, checked and unchecked checkboxes using bootstrap 5 elements. First checkbox uses disabled keyword. Second checkbox uses disabled and checked keyword. Third checkbox shows default checkbox function.

Output

Conclusion

Bootstrap 5 checkbox function uses for user interaction using form function and elements. It selects several options to save data in the database. The checkbox function contains in a small space on the web page.