Checkbox

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

Basic example

<label class="checkbox">
  <input type="checkbox"/>
  <span class="check-mark"></span> Basic example
</label>

Colors

The checkbox styles follow the contextual bootstrap colors.

Primary

Success

Danger

Warning

Info

Source code

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

Sizes

Add .checkbox-sm for smaller checkboxes or .checkbox-lg for larger.

I agree to terms

Source code

<label class="checkbox checkbox-sm"></label>
<label class="checkbox"></label>
<label class="checkbox checkbox-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="checkbox checkbox-danger">
  <input type="checkbox" checked disabled/>
  <span class="check-mark"></span> You can't change
</label>