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

Image may be NSFW.
Clik here to view.

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

Supports both Bootstrap 4 and Bootstrap 3.

The Bootstrap 4 version is available here.

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.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.5.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>

Changelog:

06/26/2019

• Update to Bootstrap 4

07/11/2017

• Update

The post Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css appeared first on CSS Script.