Bootstrap 5 is in alpha when this is written and it’s 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.