BS5 Checks & Radios | Bootstrap Tutorial

📌 What Are Bootstrap 5 Checkboxes and Radios?

Style checkboxes and radios with .form-check on the wrapper, .form-check-input on the <input>, and .form-check-label on the <label>. For radios, give each name the same value so only one can be selected.

☑️ Checkboxes (.form-check, .form-check-input, .form-check-label)

.form-check – wrapper (flex, spacing). .form-check-input – the checkbox. .form-check-label – the label. Use for and id to associate them.

🅱️

bootstrap Designer

Live Component Playground

html Source

Built with Bootstrap 5.3 • Enterprise Ready

🔘 Radio Buttons (.form-check with same name)

Use the same structure: .form-check, .form-check-input (type="radio"), .form-check-label. Give all radios in the group the same name so only one is selected.

🅱️

bootstrap Designer

Live Component Playground

html Source

Built with Bootstrap 5.3 • Enterprise Ready

🚫 Disabled (.disabled or disabled attribute)

Add disabled to the input, or add .disabled to the .form-check and use pointer-events: none on the label if needed. For inline checkboxes/radios, use .form-check-inline on each .form-check.

🅱️

bootstrap Designer

Live Component Playground

html Source

Built with Bootstrap 5.3 • Enterprise Ready

✅ Checks & Radios Best Practices

Use .form-check-input and .form-check-label with matching for / id.
Give all radios in a group the same name.
Use .form-check-inline for horizontal layout.

bootstrap

Nearby lessons