Bootstrap 5 is in alpha when this was written and so the details of this article are subject to change.
Bootstrap is a popular UI library for any JavaScript apps. In this article, we’ll look at how to style radio buttons and checkboxes with Bootstrap 5.
Radio Buttons
Bootstrap 5 also provides styles for radio buttons.
To add them, we can write:
<div class="form-check">
<input class="form-check-input" type="radio" name="fruit" id="apple">
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check">
<input class="form-check-input" type="radio" name="fruit" id="orange" checked>
<label class="form-check-label" for="orange">
orange
</label>
</div>
We set the type
attribute to radio
. And we set the name of both radio buttons to be the same so that we can select between them. Also, we use the form-check
class to style the radio button. Inside the divs we use the form-check-input
and form-check-label
classes as we did with checkboxes.
Disabled Radio Buttons
We can disable radio buttons with the disabled
attribute. Then we won’t be able to interact with them. They’ll also be lighter than usual.
For example, we can write:
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="apple" disabled>
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="orange" checked disabled>
<label class="form-check-label" for="orange">
orange
</label>
</div>
Switches
We can add switches with the form-check
and form-switch
classes. The type of the inputs are set to checkbox
.
For example, we can write:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="apple">
<label class="form-check-label" for="apple">apple</label>
</div><div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="orange" checked>
<label class="form-check-label" for="orange">orange</label>
</div><div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="grape" disabled>
<label class="form-check-label" for="grape">grape</label>
</div><div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="lemon" checked disabled>
<label class="form-check-label" for="lemon">lemon</label>
</div>
We use the form-check
and form-switch
classes on the div.
And we use the form-check-input
class to style the checkbox.
The form-check-label
class is applied to the checkbox label.
Default (Stacked)
Checkboxes are stacked on top of each other by default.
For example, if we have:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="apple">
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="orange" disabled>
<label class="form-check-label" for="orange">
orange
</label>
</div>
Then we 2 checkboxes stacked on top of each other.
Likewise, if we have multiple radio buttons, they’ll also be stacked on top of each other:
<div class="form-check">
<input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check">
<input class="form-check-input" type="radio" name="fruit" id="orange" value="orange">
<label class="form-check-label" for="orange">
orange
</label>
</div><div class="form-check">
<input class="form-check-input" type="radio" name="fruit" id="banana" value="banana" disabled>
<label class="form-check-label" for="banana">
banana
</label>
</div>
We have multiple radio buttons with the usual classes. We didn’t have to do anything to make them stacked in addition to that.
Inline
To make checkboxes inline, we just add the form-check-line
class to make them inline.
For example, we can write:
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="apple">
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="orange" disabled>
<label class="form-check-label" for="orange">
orange
</label>
</div>
We add the form-check-inline
class to each checkbox div to make them inline.
With radio buttons, we can do the same thing:
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
<label class="form-check-label" for="apple">
apple
</label>
</div><div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="fruit" id="orange" value="orange">
<label class="form-check-label" for="orange">
orange
</label>
</div><div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="fruit" id="banana" value="banana" disabled>
<label class="form-check-label" for="banana">
banana
</label>
</div>
We just add them to the div.
Conclusion
We can style radio buttons and checkboxes with Bootstrap 5 styles. It comes with many styles that we can use to style them our way. Thanks for reading my article, I hope you found it helpful!