Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. No javascript!

Demo

First just include awesome-bootstrap-checkbox.css somewhere in your html. Or awesome-bootstrap-checkbox.scss if you use sass. Next everything is based on code convention. Here is checkbox markup from Bootstrap site:

<form role="form"> ... <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> ... </form>

We have to alter it a bit:

<form role="form"> ... <div class="checkbox"> <input type="checkbox" id="checkbox1"> <label for="checkbox1"> Check me out </label> </div> ... </form>

That's it. It will work. But it will not work if you nest input inside label or put label before input.

It's the same for radios. Markup has to be the following:

<form role="form"> ... <div class="radio"> <input type="radio" name="radio2" id="radio3" value="option1"> <label for="radio3"> One </label> </div> <div class="radio"> <input type="radio" name="radio2" id="radio4" value="option2" checked> <label for="radio4"> Two </label> </div> ... </form>

You may use checkbox-primary, checkbox-danger, radio-info, etc to style checkboxes and radios with brand bootstrap colors.

checkbox-circle is for rounded checkboxes.

checkbox-single and radio-single for inputs without label text.

If you want to use glyphicons instead of font-awesome then override .checkbox class:

.checkbox input[type=checkbox]:checked + label:after { font-family: 'Glyphicons Halflings'; content: "\e013"; } .checkbox label:after { padding-left: 4px; padding-top: 2px; font-size: 9px; }

Based on Official Bootstrap Sass port and awesome Font Awesome.