BootstrapHow-ToBeginner · 3 min read

How to Create Radio Button in Bootstrap: Simple Guide

To create a radio button in Bootstrap, use the form-check class with an input element of type radio inside a div. Add the form-check-input class to the radio input and form-check-label to its label for proper Bootstrap styling.

📐

Syntax

Bootstrap radio buttons use a div with the class form-check to wrap the input and label. The radio input uses type="radio" and the class form-check-input. The label uses form-check-label and should have a for attribute matching the input's id.

div.form-check: Container for the radio button.
input.form-check-input: The radio button itself.
label.form-check-label: The text label linked to the radio.

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
  <label class="form-check-label" for="radio1">
    Option 1
  </label>
</div>

Output

A single styled radio button labeled 'Option 1'

💻

Example

This example shows a group of three Bootstrap radio buttons where only one can be selected at a time. Each radio has a unique id and shares the same name attribute to group them.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Radio Buttons Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <h2>Select an option:</h2>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="options" id="option1" value="1" checked>
      <label class="form-check-label" for="option1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="options" id="option2" value="2">
      <label class="form-check-label" for="option2">Option 2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="options" id="option3" value="3">
      <label class="form-check-label" for="option3">Option 3</label>
    </div>
  </div>
</body>
</html>

Output

A webpage with three vertically stacked radio buttons labeled Option 1, Option 2, and Option 3, with Option 1 selected by default.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap radio buttons include:

Not using the form-check container, which breaks styling.
Missing the form-check-input class on the input, causing default browser styles.
Not matching the for attribute in the label with the input's id, which breaks click accessibility.
Using different name attributes for radios meant to be grouped, allowing multiple selections.

Example of wrong and right usage:

html

<!-- Wrong: Missing form-check class and label for attribute -->
<div>
  <input type="radio" name="group1" id="wrong1">
  <label>Wrong Option</label>
</div>

<!-- Right: Proper Bootstrap structure -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="group1" id="right1">
  <label class="form-check-label" for="right1">Right Option</label>
</div>

Output

First radio button appears unstyled and label is not clickable; second radio button is styled and label is clickable.

📊

Quick Reference

Remember these tips when working with Bootstrap radio buttons:

Wrap each radio input and label in a div.form-check.
Use form-check-input on the input element.
Use form-check-label on the label and link it with for to the input's id.
Group radios by giving them the same name attribute.
Include Bootstrap CSS for styling to work.

✅

Key Takeaways

Use form-check to wrap radio inputs and labels for Bootstrap styling.

Add form-check-input class to the radio input element.

Link labels to inputs with matching for and id attributes for accessibility.

Group radio buttons by giving them the same name attribute to allow only one selection.

Always include Bootstrap CSS to see the styled radio buttons.