Awesome checkbox and radio button styling with iCheck Bootstrap

In this tutorial we learn to customizing html checkboxes and radio buttons using twitter bootstrap. icheck-bootstrap is pure css solution for displaying twitter bootstrap style checkboxes and radio buttons.

Using the icheck-bootstrap JS provided will override the normal input type checkbox and radio and apply with iCheck style of your choice.

Color schemes

Twitter Bootstrap: As you can see in above examples, icheck-primary class used for buttons styling. You can use following classes for Twitter Bootstrap color scheme:

.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger

Flat UI Colors: Also you can use one of the really nice colors from below classes.

.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos

HTML syntax

checkbox example

<div class="icheck-primary">
    <input type="checkbox" id="htmlCheckboxId" />
    <label for="htmlCheckboxId">Click to check</label>
</div>
radio buttons example
<div class="icheck-primary">
    <input type="radio" id="htmlRadioId1" name="htmlGroupName" />
    <label for="htmlRadioId1">Option</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="htmlRadioId2" name="htmlGroupName" />
    <label for="htmlRadioId2">Option</label>
</div>

inline styling

To have checkboxes or radio buttons inline use .icheck-inline class

<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="avb1" />
    <label for="avb1">Label</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="avb2" />
    <label for="avb2">Label</label>
</div>

disabled

Use disabled attribute on your input (type: checkbox or radio) to have disabled style.

no label
To have components without label, you still have to have label control with empty text.

<div class="icheck-primary">
    <input type="checkbox" id="htmlCheckboxId" />
    <label for="htmlCheckboxId"></label>
</div>

Thank you for being here, Please share your feedback in below comment section.