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, checkboxes, and file inputs with Bootstrap 5.

Radio Buttons and Checkboxes without Labels

We can add radio buttons and checkboxes without labels.

To do that, we can write:

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="">
</div>

to add them.

Toggle Buttons

Bootstrap lets us turn checkboxes and radio buttons into toggle buttons.

To do that, we can write:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">toggle</label>

to add the toggle button.

It’ll display differently depending on if it’s toggled on or off.

The id of the input and the for attribute of the label have to match.

Radio Toggle Buttons

We can do the same for radio buttons.

For example, we can write:

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="apple" autocomplete="off" checked>
  <label class="btn btn-secondary" for="apple">apple</label>

<input type="radio" class="btn-check" name="options" id="orange" autocomplete="off">
  <label class="btn btn-secondary" for="orange">orange</label>
<input type="radio" class="btn-check" name="options" id="grape" autocomplete="off">
  <label class="btn btn-secondary" for="grape">grape</label>
</div>

to add a button group.

Each button is a group is a radio button.

We use the btn-group class to style the button group.

The input type is set to radio .

btn-check is the class to make them display as toggle buttons.

And the id of the input has to match the for attribute value of the label .

#javascript #software-development #programming #technology #web-development #bootstrap 5