
Bs5 Checks And Radios in Bootstrap
In Bootstrap 5 (BS5), checks and radios are custom-styled versions of HTML checkboxes and radio buttons. They offer accessible, flexible, and responsive form controls with options for inline display, switches, and toggles.
? Checkbox Example
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label></div>
? Radio Button Example
<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked> <label class="form-check-label" for="radio1"> First radio </label></div><div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2"> <label class="form-check-label" for="radio2"> Second radio </label></div>
?? Inline Checks and Radios
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label></div>
? Switches (Toggle-style Checkboxes)
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Toggle this switch</label></div>
Adds a modern, iOS-style switch appearance.
? Disabled States
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="disabledCheck" disabled> <label class="form-check-label" for="disabledCheck"> Disabled checkbox </label></div>
<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="disabledRadio" disabled> <label class="form-check-label" for="disabledRadio"> Disabled radio </label></div>
??? Custom Styles with Utilities
You can customize spacing and alignment using utility classes like ms-2
, me-1
, pt-1
, form-check-reverse
, etc.
Would you like an example of validation states, toggleable button groups with checks/radios, or form layouts next?