In Bootstrap 5, you can create stylish checkboxes and radio buttons using the <input> element and Bootstrap’s form styling classes. Here’s how you can create checkboxes and radio buttons in Bootstrap 5:
- Checkboxes:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
Checkbox 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
Checkbox 2
</label>
</div>In this example, the form-check class is applied to a <div> container, and the checkbox is created using the <input> element with the form-check-input class. The associated label is created using the <label> element with the form-check-label class.
- Inline Checkboxes:
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
Checkbox 1
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
Checkbox 2
</label>
</div>By adding the form-check-inline class to the <div> container, the checkboxes will be displayed inline, horizontally.
- Radio Buttons:
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" value="option1">
<label class="form-check-label" for="radio1">
Radio 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Radio 2
</label>
</div>Radio buttons are created using the <input> element with the type="radio" attribute. Make sure to give each radio button in a group the same name attribute to enable the selection of a single option from the group.
- Inline Radio Buttons:
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" value="option1">
<label class="form-check-label" for="radio1">
Radio 1
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioGroup" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Radio 2
</label>
</div>By adding the form-check-inline class to the <div> container, the radio buttons will be displayed inline, horizontally.
These examples demonstrate how to create checkboxes and radio buttons in Bootstrap 5. You can further customize the appearance and behavior of checkboxes and radio buttons using additional Bootstrap classes and JavaScript-based plugins if needed.
Remember to include the necessary Bootstrap 5 CSS and JavaScript files in your project to apply the checkbox and radio button styling and functionality provided by Bootstrap