Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

Category: CSS & CSS3 , Form , Recommended | November 15, 2014
Author:
Views Total: 13,641
Official Page: Go to website
Last Update: November 15, 2014
License: MIT

Preview:

Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

Description:

A pure CSS solution to beautify the default checkboxes & radio buttons with Bootstrap styles.

How to use it:

Add the required Bootstrap’s stylesheet and Font Awesome icon font in the document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Add the  awesome-bootstrap-checkbox.css file in the document.

<link rel="stylesheet" href="build.css">

Beautify the checkboxes & radio buttons with Bootstrap branding colors.

<div class="checkbox checkbox-primary">
  <input id="checkbox" type="checkbox" checked>
</div>

<div class="checkbox checkbox-success">
  <input id="checkbox" type="checkbox">
</div>