radio
is a Bootstrap form input used when you just want the user to choose one option from a list of options.
The radio
class can be used in two ways:
Inside a container and input
tag.
With the custom-control
tag.
radio
class inside the container tagWe 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>
radio
class with the custom-control
tagA 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.
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.