Registry / web-framework / awesome-bootstrap-checkbox

awesome-bootstrap-checkbox

library2.0.1jsnpmunverified

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.

web-framework

npm install awesome-bootstrap-checkbox

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AWESOME-BOOTSTRAP-

awesome-bootstrap-checkbox

web-frameworkjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CSS

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

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

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

SCSS

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

✗ @import "awesome-bootstrap-checkbox.scss"; // missing required Bootstrap and Font Awesome 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.

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">  <link rel="stylesheet" href="awesome-bootstrap-checkbox.css">  <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>  <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>

Debug

Known issues

gotchaInput 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>

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedBootstrap 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.

affects: >=2.0.0

Errors

Common errors & fixes

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

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>

Icons appear as squares instead of check marks.

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.

npm install fails or missing files.

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

fix

Run: npm install awesome-bootstrap-checkbox@latest

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/flatlogic/awesome-bootstrap-checkbox ↗

packagehttps://www.npmjs.com/package/awesome-bootstrap-checkbox ↗

homepagehttps://awesome-bootstrap-checkbox.mindcraft.dev ↗