In Bootstrap 5, you can create stylish checkboxes and radio buttons using the `form-check` class. This class provides consistent styling for checkboxes and radio buttons and can be combined with other utility classes to customize their appearance and behavior. Here's an example of how to create checkboxes and radio buttons in Bootstrap 5:

1. Checkbox:

html
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkboxExample">
    <label class="form-check-label" for="checkboxExample">
        Checkbox Label
    </label>
</div>

In this example, we have a `<div>` element with the class `form-check` that contains an `<input>` element with the class `form-check-input`. The `type="checkbox"` attribute specifies that it's a checkbox. The `value` attribute can be used to specify a value for the checkbox. The `id` attribute uniquely identifies the checkbox, and the `for` attribute in the `<label>` element associates the label with the checkbox.

2. Radio Button:

html
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioExample" id="radioExample1" value="option1" checked>
    <label class="form-check-label" for="radioExample1">
        Radio Button 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioExample" id="radioExample2" value="option2">
    <label class="form-check-label" for="radioExample2">
        Radio Button 2
    </label>
</div>

In this example, we have two radio buttons within separate `<div>` elements with the class `form-check`. Both radio buttons share the same `name` attribute to create a radio button group. The `type="radio"` attribute specifies that they are radio buttons. The `value` attribute can be used to specify a value for each radio button. The `id` attribute uniquely identifies each radio button, and the `for` attribute in the `<label>` elements associates the labels with the corresponding radio buttons.

You can further customize checkboxes and radio buttons by adding additional classes or attributes. For example, you can use the `.form-check-inline` class to display checkboxes or radio buttons inline:

html
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="checkboxInline1" value="option1">
    <label class="form-check-label" for="checkboxInline1">
        Checkbox 1
    </label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="checkboxInline2" value="option2">
    <label class="form-check-label" for="checkboxInline2">
        Checkbox 2
    </label>
</div>

These are some basic examples of creating checkboxes and radio buttons in Bootstrap 5. You can combine them with other form elements and styling options to create more complex and customized forms. Make sure to refer to the Bootstrap documentation for additional options and styling classes: https://getbootstrap.com/docs/5.1/forms/checks-radios/.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc