How to use radio in Bootstrap

Introduction

radio is a Bootstrap form input used when you just want the user to choose one option from a list of options.

Usage

The radio class can be used in two ways:

• Inside a container and input tag.

• With the custom-control tag.

Specifying the radio class inside the container tag

We can use radio buttons by including them in a container (e.g., div) and input tag:

<div>
     <label><input type="radio" name="option" checked>Fried chicken</label>
  </div>

Implementation

Using the radio class with the custom-control tag

A custom radio can be created by wrapping a container element (e.g., div) around the radio button.

The container will have the custom-control and custom-radio classes, while the input with type="radio" will have the custom-control-input class.

Here is how we can use radio buttons with the custom-control tag:

<div>
       <input type="radio">
       <label>Fried chicken</label>
     </div>

Note: custom-radio is one of the Bootstrap customized form elements. These elements are meant to replace the browser defaults.

Keep in mind that if you use labels for accompanying text, you should add the custom-control-label class to it.

Implementation

Observe the differences View the HTML code of both these implementations to get an idea of the difference in how these radio buttons are created.