Awesome Bootstrap Checkbox
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!
Now with Bootstrap 4 support!
Use
First just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass configuration. Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
... Check me out ...
We have to alter it a bit:
... Check me out ...
That's it. It will work. But it will not work if you nest input inside label or put label before input.
Browser support
- Firefox (3.6+)
- Chrome (14+)
- IE (9+)
- Opera (11.6+)
- Safari (6+)
Radios
It's the same for radios. Markup has to be the following:
... One Two ...
Brand Colors and other features
You may use abc-checkbox-primary
, abc-checkbox-danger
, abc-radio-info
, etc to style checkboxes and radios with brand bootstrap colors.
abc-checkbox-circle
is for rounded checkboxes.
Inputs without label text:
Sass
UsingAs per example in the demo
folder, to use Awesome Bootstrap Checkbox you'll have to @import
the following library parts:
;;; ; ;
Adjust this to the path where your bootstrap and font-awesome files are located.
Custom icon font
If you want to use another icon font instead of Font Awesome, such as Glyphicons, override the default variables:
;; .abc-checkbox label:after
Or for plain CSS, override the .abc-checkbox
class:
Credits
Based on the Bootstrap and the awesome Font Awesome.