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

Category: CSS & CSS3 , Form , Recommended | November 15, 2014
Author:
Views Total: 14,791
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>

9 thoughts on “Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

  1. Smaily Carrilho

    Hi, it’s not working with bootstrap 3.3.6

    The checkbox doesn’t check.

    Reply
    1. gamer

      seems like you are nesting input and label..Nesting wont work..also input must be before label

      Reply
      1. Nitesh

        same here, does not change the checked attribute of input checkbox

        Reply
  2. Anllerys Cuevas M.

    no working, i downloaded everything font…, bootstrap… and awesome…. link everythig (in my html) and still no working.

    Reply

Leave a Reply