Bootstrap 5 — Radio Buttons and Checkboxes

Photo by amirali mirhashemian on Unsplash

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…