Bootstrap Radio – examples & tutorial

A Radio Button is a component used to allow a user to make a single choice among a number of options (whereas Checkboxes are used for selecting multiple options).

Basic example

Browser default checkboxes and radios are replaced with the help of
.form-check, a series of classes for both input types that improves the layout
and behavior of their HTML elements, that provide greater customization and cross browser
consistency. Checkboxes are for selecting one or several options in a list, while radios are
for selecting one option from many.

Structurally, our <input>s and <label>s are sibling
elements as opposed to an <input> within a <label>. This
is slightly more verbose as you must specify id and for attributes
to relate the <input> and <label>.

We use the sibling selector (~) for all our
<input> states, like :checked or :disabled. When
combined with the .form-check-label class, we can easily style the text for each
item based on the <input>‘s state.

Default radio

Default checked radio

Show code

Edit in sandbox

• HTML

        
            
          <!-- Default radio -->
          <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
            <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
          </div>

          <!-- Default checked radio -->
          <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked/>
            <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
          </div>