Awesome Bootstrap Checkbox

2.0.1 verified Sat Apr 25 auth: no javascript

A pure CSS library for styling checkboxes and radios using Font Awesome icons, designed to work with Bootstrap 3, 4, and 5. Current stable version is 2.0.1 (released 2022), with v2.0 adding Bootstrap 5 support. No JavaScript required; styling is achieved via CSS pseudo-elements and carefully structured HTML. Key differentiators: lightweight (CSS only), easy integration with Bootstrap, support for brand colors and custom icon fonts. Release cadence is infrequent but stable.

Common errors

error Checkbox or radio styling does not appear; just shows default input. ↓

cause Input is nested inside the label, or missing for/id attributes.

fix

Ensure HTML structure: <div class="form-check abc-checkbox"><input id="x" ...><label for="x">...</label></div>

error Icons appear as squares instead of check marks. ↓

cause Font Awesome is not loaded or the icon font is not applied.

fix

Include Font Awesome CSS, or override $font-family-icon if using a different font.

error npm install fails or missing files. ↓

cause Incorrect package name or version, or package is not included.

fix

Run: npm install awesome-bootstrap-checkbox@latest

Warnings

gotcha Input must be placed before the label, and must not be nested inside the label. The for/id attributes are required. ↓

fix Use the exact structure: <div class="form-check abc-checkbox"><input id="x" type="checkbox"><label for="x">...</label></div>

gotcha The library requires Font Awesome to be loaded. If you want a different icon font, you must override CSS variables or styles. ↓

fix Include Font Awesome CSS or override $font-family-icon and $check-icon in SCSS.

deprecated Bootstrap 3 and 4 support is deprecated in v2.0.0; the library now targets Bootstrap 5 primarily. ↓

fix Use Bootstrap 5 markup (e.g., form-check). For older Bootstrap versions, use v1.0.2.

Install

npm install awesome-bootstrap-checkbox

yarn add awesome-bootstrap-checkbox

pnpm add awesome-bootstrap-checkbox

Imports

CSS

wrong

<script src="dist/awesome-bootstrap-checkbox.js"></script>

correct

<link rel="stylesheet" href="dist/awesome-bootstrap-checkbox.css">

This is a CSS-only library; there is no JavaScript file to import.

SCSS

wrong

@import "awesome-bootstrap-checkbox.scss"; // missing required Bootstrap and Font Awesome variables

correct

@import "awesome-bootstrap-checkbox";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "font-awesome/scss/variables";

When using Sass, you must import Bootstrap's functions, variables, mixins and Font Awesome's variables before the library.

npm package
```
npm install awesome-bootstrap-checkbox
```
Install the package to get the CSS, SCSS, and source files.

Quickstart

Demonstrates basic usage of checkbox and radio with required Bootstrap and Font Awesome dependencies.

<!-- Include Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- Include Font Awesome 5 CSS (or use version 6) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Include Awesome Bootstrap Checkbox CSS -->
<link rel="stylesheet" href="awesome-bootstrap-checkbox.css">

<!-- Checkbox example -->
<div class="form-check abc-checkbox">
  <input class="form-check-input" type="checkbox" id="checkbox1">
  <label class="form-check-label" for="checkbox1">
    Check me out
  </label>
</div>

<!-- Radio example -->
<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>