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

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


The checkbox styles follow the contextual bootstrap colors.

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>


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

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.

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