Awesome Bootstrap Checkbox

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

Now with Bootstrap 4 support!

Demo

Use

First just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass configuration. Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:

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

We have to alter it a bit:

<form role="form">
  ...
  <div class="form-check abc-checkbox">
    <input class="form-check-input" id="checkbox1" type="checkbox">
    <label class="form-check-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.

Browser support

• Firefox (3.6+)
• Chrome (14+)
• IE (9+)
• Opera (11.6+)
• Safari (6+)

Radios

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

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

Brand Colors and other features

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

abc-checkbox-circle is for rounded checkboxes.

Inputs without label text:

<div class="form-check abc-checkbox">
  <input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
  <label class="form-check-label" for="singleCheckbox"></label>
</div>

Using Sass

As per example in the demo folder, to use Awesome Bootstrap Checkbox you'll have to @import the following library parts:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

@import "../node_modules/Font-Awesome/scss/variables";

@import "../awesome-bootstrap-checkbox";

Adjust this to the path where your bootstrap and font-awesome files are located.

Custom icon font

If you want to use another icon font instead of Font Awesome, such as Glyphicons, override the default variables:

$font-family-icon: 'Glyphicons Halflings';
$check-icon: "\e013";

.abc-checkbox label:after {
    padding-left: 4px;
    padding-top: 2px;
    font-size: 9px;
}

Or for plain CSS, override the .abc-checkbox class:

.abc-checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.abc-checkbox label:after {
    padding-left: 4px;
    padding-top: 2px;
    font-size: 9px;
}

Credits

Based on the Bootstrap and the awesome Font Awesome.