1 Awesome Bootstrap Checkbox
2 ==========================
4 [![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
5 [![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
6 [![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
7 [![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
9 [Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
11 For **[Bootstrap 4][]** checkout [v1.0.0-alpha.1][] tag!
18 First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
19 Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
24 <div class="checkbox">
26 <input type="checkbox"> Check me out
33 We have to alter it a bit:
37 <div class="checkbox">
38 <input type="checkbox" id="checkbox1">
39 <label for="checkbox1">
46 That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
48 If you want to enable **Opera 12** and earlier support just add class `styled` to `input` element:
51 <input type="checkbox" id="checkbox1" class="styled">
66 It's the same for radios. Markup has to be the following:
71 <input type="radio" name="radio2" id="radio3" value="option1">
77 <input type="radio" name="radio2" id="radio4" value="option2" checked>
86 Brand Colors and other features
89 You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
91 `checkbox-circle` is for rounded checkboxes.
93 Inputs without label text:
96 <div class="checkbox">
97 <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
105 As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
108 @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
109 @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
111 @import "../bower_components/Font-Awesome/scss/variables";
113 @import "../awesome-bootstrap-checkbox";
116 Adjust this to the path where your bootstrap and font-awesome files are located.
121 Just like the Sass setup, you'll have to `@import` the following library parts:
124 @import "../bower_components/bootstrap/less/variables";
125 @import "../bower_components/bootstrap/less/mixins";
127 @import "../awesome-bootstrap-checkbox";
129 @import "../bower_components/Font-Awesome/less/variables";
135 If you want to use another icon font instead of Font Awesome, such as [Glyphicons][], override the default variables:
137 $font-family-icon: 'Glyphicons Halflings';
138 $check-icon: "\e013";
140 .checkbox label:after {
149 @font-family-icon: 'Glyphicons Halflings';
150 @check-icon: "\e013";
152 // Same styles as the Sass example...
155 Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
157 input[type="checkbox"].styled:checked + label:after,
158 input[type="radio"].styled:checked + label:after,
159 .checkbox input[type=checkbox]:checked + label:after {
160 font-family: 'Glyphicons Halflings';
164 input[type="checkbox"].styled:checked label:after,
165 input[type="radio"].styled:checked label:after,
166 .checkbox label:after {
176 Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
179 [Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
180 [Bootstrap]: http://getbootstrap.com/
181 [Bootstrap 4]: https://v4-alpha.getbootstrap.com/
182 [v1.0.0-alpha.1]: https://github.com/flatlogic/awesome-bootstrap-checkbox/releases/tag/v1.0.0-alpha.1
183 [Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
184 [Font Awesome]: https://github.com/FortAwesome/Font-Awesome
185 [Glyphicons]: http://getbootstrap.com/components/#glyphicons
186 [Sass]: http://sass-lang.com/
187 [Less]: http://lesscss.org/