{"id":18972,"library":"awesome-bootstrap-checkbox","title":"Awesome Bootstrap Checkbox","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/flatlogic/awesome-bootstrap-checkbox","tags":["javascript","bootstrap","font-awesome","scss"],"install":[{"cmd":"npm install awesome-bootstrap-checkbox","lang":"bash","label":"npm"},{"cmd":"yarn add awesome-bootstrap-checkbox","lang":"bash","label":"yarn"},{"cmd":"pnpm add awesome-bootstrap-checkbox","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a CSS-only library; there is no JavaScript file to import.","wrong":"<script src=\"dist/awesome-bootstrap-checkbox.js\"></script>","symbol":"CSS","correct":"<link rel=\"stylesheet\" href=\"dist/awesome-bootstrap-checkbox.css\">"},{"note":"When using Sass, you must import Bootstrap's functions, variables, mixins and Font Awesome's variables before the library.","wrong":"@import \"awesome-bootstrap-checkbox.scss\"; // missing required Bootstrap and Font Awesome variables","symbol":"SCSS","correct":"@import \"awesome-bootstrap-checkbox\";\n@import \"bootstrap/scss/functions\";\n@import \"bootstrap/scss/variables\";\n@import \"bootstrap/scss/mixins\";\n@import \"font-awesome/scss/variables\";"},{"note":"Install the package to get the CSS, SCSS, and source files.","wrong":"","symbol":"npm package","correct":"npm install awesome-bootstrap-checkbox"}],"quickstart":{"code":"<!-- Include Bootstrap 5 CSS -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\">\n<!-- Include Font Awesome 5 CSS (or use version 6) -->\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css\">\n<!-- Include Awesome Bootstrap Checkbox CSS -->\n<link rel=\"stylesheet\" href=\"awesome-bootstrap-checkbox.css\">\n\n<!-- Checkbox example -->\n<div class=\"form-check abc-checkbox\">\n  <input class=\"form-check-input\" type=\"checkbox\" id=\"checkbox1\">\n  <label class=\"form-check-label\" for=\"checkbox1\">\n    Check me out\n  </label>\n</div>\n\n<!-- Radio example -->\n<div class=\"form-check abc-radio\">\n  <input class=\"form-check-input\" type=\"radio\" name=\"radio1\" id=\"radio1\" value=\"option1\" checked>\n  <label class=\"form-check-label\" for=\"radio1\">\n    One\n  </label>\n</div>","lang":"html","description":"Demonstrates basic usage of checkbox and radio with required Bootstrap and Font Awesome dependencies."},"warnings":[{"fix":"Use the exact structure: <div class=\"form-check abc-checkbox\"><input id=\"x\" type=\"checkbox\"><label for=\"x\">...</label></div>","message":"Input must be placed before the label, and must not be nested inside the label. The for/id attributes are required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Include Font Awesome CSS or override $font-family-icon and $check-icon in SCSS.","message":"The library requires Font Awesome to be loaded. If you want a different icon font, you must override CSS variables or styles.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use Bootstrap 5 markup (e.g., form-check). For older Bootstrap versions, use v1.0.2.","message":"Bootstrap 3 and 4 support is deprecated in v2.0.0; the library now targets Bootstrap 5 primarily.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure HTML structure: <div class=\"form-check abc-checkbox\"><input id=\"x\" ...><label for=\"x\">...</label></div>","cause":"Input is nested inside the label, or missing for/id attributes.","error":"Checkbox or radio styling does not appear; just shows default input."},{"fix":"Include Font Awesome CSS, or override $font-family-icon if using a different font.","cause":"Font Awesome is not loaded or the icon font is not applied.","error":"Icons appear as squares instead of check marks."},{"fix":"Run: npm install awesome-bootstrap-checkbox@latest","cause":"Incorrect package name or version, or package is not included.","error":"npm install fails or missing files."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}