{"id":13630166,"url":"https://github.com/flatlogic/awesome-bootstrap-checkbox","last_synced_at":"2025-05-14T02:04:30.646Z","repository":{"id":15553520,"uuid":"18288590","full_name":"flatlogic/awesome-bootstrap-checkbox","owner":"flatlogic","description":"✔️Font Awesome Bootstrap Checkboxes \u0026 Radios. Pure css way to make inputs look prettier","archived":false,"fork":false,"pushed_at":"2022-06-24T10:16:01.000Z","size":3636,"stargazers_count":2030,"open_issues_count":1,"forks_count":425,"subscribers_count":100,"default_branch":"master","last_synced_at":"2025-05-11T15:01:46.400Z","etag":null,"topics":["bootstrap","bootstrap4","checkbox","font-awesome","nojs"],"latest_commit_sha":null,"homepage":"http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/1.0.0/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flatlogic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-31T09:45:51.000Z","updated_at":"2025-05-09T12:38:45.000Z","dependencies_parsed_at":"2022-08-18T18:41:04.967Z","dependency_job_id":null,"html_url":"https://github.com/flatlogic/awesome-bootstrap-checkbox","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fawesome-bootstrap-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fawesome-bootstrap-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fawesome-bootstrap-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fawesome-bootstrap-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flatlogic","download_url":"https://codeload.github.com/flatlogic/awesome-bootstrap-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253660846,"owners_count":21943823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap4","checkbox","font-awesome","nojs"],"created_at":"2024-08-01T22:01:32.460Z","updated_at":"2025-05-14T02:04:30.628Z","avatar_url":"https://github.com/flatlogic.png","language":"CSS","readme":"# 🤘 Awesome Bootstrap Checkbox\n\n[![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)\n[![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)\n[![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master\u0026style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)\n[![Join the chat at https://gitter.im/flatlogic/awesome-bootstrap-checkbox](https://badges.gitter.im/flatlogic/awesome-bootstrap-checkbox.svg)](https://gitter.im/flatlogic/awesome-bootstrap-checkbox?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[View Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/) | [Download](https://github.com/flatlogic/awesome-bootstrap-checkbox.git) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)\n\n[Font Awesome][] [Bootstrap][] Checkboxes \u0026 Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**\n\nFor **[Bootstrap 4 version](https://getbootstrap.com/docs/4.6/getting-started/introduction/)** please checkout [bump-to-bootstrap4][] branch\n\nFor **[Bootstrap 5 version](https://getbootstrap.com/)** please checkout [bump-to-bootstrap5](https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap5) branch\n\nCheck out our React/Vue/Angular/Node.js boilerplates\n-----------\n[Flatlogic Templates](https://flatlogic.com/templates) - 💥Free and open-source application boilerplates built with Bootstrap 5, React, Vue, Angular, Node.js\n\nUse\n------------\n\nTo install latest version via NPM simply run:\n```shell\n$ npm install awesome-bootstrap-checkbox # for Bootstrap 4 version\n$ npm install awesome-bootstrap-checkbox@0.3.7 # for Bootstrap 3 version\n```\n\nThere is a separate [README.md][] file for **[Bootstrap 4 version][]**.\n\nThen just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.\nNext, everything is based on code convention. Here is checkbox markup from Bootstrap site:\n\n````html\n\u003cform role=\"form\"\u003e\n  ...\n  \u003cdiv class=\"checkbox\"\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"checkbox\"\u003e Check me out\n    \u003c/label\u003e\n  \u003c/div\u003e\n  ...\n\u003c/form\u003e\n````\n\nWe have to alter it a bit:\n````html\n\u003cform role=\"form\"\u003e\n  ...\n  \u003cdiv class=\"checkbox\"\u003e\n    \u003cinput type=\"checkbox\" id=\"checkbox1\"\u003e\n    \u003clabel for=\"checkbox1\"\u003e\n        Check me out\n    \u003c/label\u003e\n  \u003c/div\u003e\n  ...\n\u003c/form\u003e\n````\nThat's it. It will work. But it **will not** work if you nest input inside label or put label before input.\n\nIf you want to enable **Opera 12** and earlier support  just add class `styled` to `input` element:\n````html\n...\n\u003cinput type=\"checkbox\" id=\"checkbox1\" class=\"styled\"\u003e\n...\n````\n\nBrowser support\n-----------\n- Firefox (_3.6+_)\n- Chrome  (_14+_)\n- IE      (_9+_)\n- Opera   (_11.6+_)\n- Safari  (_6+_)\n\nRadios\n------------\n\nIt's the same for radios. Markup has to be the following:\n````html\n\u003cform role=\"form\"\u003e\n  ...\n  \u003cdiv class=\"radio\"\u003e\n      \u003cinput type=\"radio\" name=\"radio2\" id=\"radio3\" value=\"option1\"\u003e\n      \u003clabel for=\"radio3\"\u003e\n          One\n      \u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"radio\"\u003e\n      \u003cinput type=\"radio\" name=\"radio2\" id=\"radio4\" value=\"option2\" checked\u003e\n      \u003clabel for=\"radio4\"\u003e\n          Two\n      \u003c/label\u003e\n  \u003c/div\u003e\n  ...\n\u003c/form\u003e\n````\n\nBrand Colors and other features\n------------\n\nYou may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.\n\n`checkbox-circle` is for rounded checkboxes.\n\nInputs without label text:\n\n````html\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput type=\"checkbox\" class=\"styled\" id=\"singleCheckbox1\" value=\"option1\" aria-label=\"Single checkbox One\"\u003e\n  \u003clabel\u003e\u003c/label\u003e\n\u003c/div\u003e\n````\n\nUsing [Sass][]\n----------\n\nAs per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:\n\n````scss\n@import \"../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables\";\n@import \"../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins\";\n\n@import \"../bower_components/Font-Awesome/scss/variables\";\n\n@import \"../awesome-bootstrap-checkbox\";\n````\n\nAdjust this to the path where your bootstrap and font-awesome files are located.\n\nUsing [Less][]\n----------\n\nJust like the Sass setup, you'll have to `@import` the following library parts:\n\n````less\n@import \"../bower_components/bootstrap/less/variables\";\n@import \"../bower_components/bootstrap/less/mixins\";\n\n@import \"../awesome-bootstrap-checkbox\";\n\n@import \"../bower_components/Font-Awesome/less/variables\";\n````\n\nCustom icon font\n------------\n\nIf you want to use another icon font instead of Font Awesome, such as [Glyphicons][], override the default variables:\n````scss\n$font-family-icon: 'Glyphicons Halflings';\n$check-icon: \"\\e013\";\n\n.checkbox label:after {\n    padding-left: 4px;\n    padding-top: 2px;\n    font-size: 9px;\n}\n````\n\nor for Less:\n````less\n@font-family-icon: 'Glyphicons Halflings';\n@check-icon: \"\\e013\";\n\n// Same styles as the Sass example...\n````\n\nOr for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):\n````css\ninput[type=\"checkbox\"].styled:checked + label:after,\ninput[type=\"radio\"].styled:checked + label:after,\n.checkbox input[type=checkbox]:checked + label:after {\n    font-family: 'Glyphicons Halflings';\n    content: \"\\e013\";\n}\n\ninput[type=\"checkbox\"].styled:checked label:after,\ninput[type=\"radio\"].styled:checked label:after,\n.checkbox label:after {\n    padding-left: 4px;\n    padding-top: 2px;\n    font-size: 9px;\n}\n````\n\nHow can I support developers?\n------------------------------\n- Star our GitHub repo :star:\n- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:\n- Follow us on [Twitter](https://twitter.com/flatlogic) :feet:\n- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:\n\nSupport\n------------------------------\nFor any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation!\n\nMore from Flatlogic\n------------------------------\n- [React Native Starter](https://flatlogic.com/templates/react-native) - 🚀 A powerful react native starter template that bootstraps development of your mobile application \n- [Sing App Dashboard](https://flatlogic.com/templates/sing-app-html5) - 💥 Free and open-source admin dashboard template built with Bootstrap 4\n- [React Material Admin](https://flatlogic.com/templates/react-material-admin-full) - ⚡ Admin boilerplate made with React 17 and Material-UI 5\n\nCredits\n------------\n\nBased on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].\n\n\n[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/\n[Bootstrap]: http://getbootstrap.com/\n[Bootstrap 4 version]: https://getbootstrap.com/\n[bump-to-bootstrap4]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4\n[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass\n[Font Awesome]: https://github.com/FortAwesome/Font-Awesome\n[Glyphicons]: http://getbootstrap.com/components/#glyphicons\n[Sass]: http://sass-lang.com/\n[Less]: http://lesscss.org/\n[README.md]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4\n","funding_links":[],"categories":["CSS","css","JavaScript","Uncategorized"],"sub_categories":["Bootstrap","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatlogic%2Fawesome-bootstrap-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflatlogic%2Fawesome-bootstrap-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatlogic%2Fawesome-bootstrap-checkbox/lists"}