Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
bootstrap
communitycreator

How to use radio in Bootstrap

Akande Olalekan Toheeb

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 class="radio">
     <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 class="custom-control custom-radio">
       <input type="radio" class="custom-control-input">
       <label class="custom-control-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.

RELATED TAGS

html
bootstrap
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring