Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
org.webjars.bowergithub.flatlogic:awesome-bootstrap-checkbox
Advanced tools
WebJar for awesome-bootstrap-checkbox
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!
Now with Bootstrap 4 support!
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:
<form role="form">
...
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Check me out
</label>
</div>
...
</form>
We have to alter it a bit:
<form role="form">
...
<div class="form-check abc-checkbox">
<input class="form-check-input" id="checkbox1" type="checkbox">
<label class="form-check-label" for="checkbox1">
Check me out
</label>
</div>
...
</form>
That's it. It will work. But it will not work if you nest input inside label or put label before input.
It's the same for radios. Markup has to be the following:
<form role="form">
...
<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>
<div class="form-check abc-radio">
<input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Two
</label>
</div>
...
</form>
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:
<div class="form-check abc-checkbox">
<input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
<label class="form-check-label" for="singleCheckbox"></label>
</div>
As per example in the demo
folder, to use Awesome Bootstrap Checkbox you'll have to @import
the following library parts:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/Font-Awesome/scss/variables";
@import "../awesome-bootstrap-checkbox";
Adjust this to the path where your bootstrap and font-awesome files are located.
If you want to use another icon font instead of Font Awesome, such as Glyphicons, override the default variables:
$font-family-icon: 'Glyphicons Halflings';
$check-icon: "\e013";
.abc-checkbox label:after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
}
Or for plain CSS, override the .abc-checkbox
class:
.abc-checkbox input[type=checkbox]:checked + label:after {
font-family: 'Glyphicons Halflings';
content: "\e013";
}
.abc-checkbox label:after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
}
Based on the Bootstrap and the awesome Font Awesome.
FAQs
WebJar for awesome-bootstrap-checkbox
We found that org.webjars.bowergithub.flatlogic:awesome-bootstrap-checkbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.