Radio button

You can customize radio buttons by combining different colors and sizes. See the basic example bellow:

Apple

Peach

Orange

<div class="form-group">
  <label class="radio">
    <input type="radio" name="radio-group" checked>
    <span class="check-mark"></span> Apple
  </label>
</div>
<div class="form-group">
  <label class="radio">
    <input type="radio" name="radio-group">
    <span class="check-mark"></span> Peach
  </label>
</div>
<div class="form-group">
  <label class="radio">
    <input type="radio" name="radio-group">
    <span class="check-mark"></span> Orange
  </label>
</div>

You also can use input[type=checkbox] to create your radio button component.

Colors

The radio button styles follow the contextual bootstrap colors.

Primary

Success

Danger

Warning

Info

Source code

<label class="radio radio-primary"></label>
<label class="radio radio-success"></label>
<label class="radio radio-danger"></label>
<label class="radio radio-warning"></label>
<label class="radio radio-info"></label>

Sizes

Add .radio-sm for smaller radio buttons or .radio-lg for larger.

Small

Normal

Large

Source code

<label class="radio radio-sm"></label>
<label class="radio"></label>
<label class="radio radio-lg"></label>

Disabled state

When adding the disabled boolean attribute to the input element, the appearance changes to reflect this state.

You can't change

Source code

<label class="radio radio-danger">
  <input type="checkbox" checked disabled>
  <span class="check-mark"></span> You can't change
</label>