"Fancy Bootstrap Checkboxes"
Bootstrap 3.3.0 Snippet by mouse0270

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="[ row ]"> <h2>Fancy Bootstrap Checkboxes that work with <a href="https://bootswatch.com/" target="_blank">Bootswatch</a></h2> <p>My latest project needed some checkboxes that worked very nicely with bootswatch. Use the Theme picker above here to check out what the checkboxes look like in the different themes.</p> </div> <div class="[ col-xs-12 col-sm-6 ]"> <h3>Standard Checkboxes</h3><hr /> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default" class="[ btn btn-default active ]"> Default Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-primary" id="fancy-checkbox-primary" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-primary" class="[ btn btn-primary ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-primary" class="[ btn btn-default active ]"> Primary Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-success" id="fancy-checkbox-success" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-success" class="[ btn btn-success ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-success" class="[ btn btn-default active ]"> Success Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-info" class="[ btn btn-info ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-info" class="[ btn btn-default active ]"> Info Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-warning" id="fancy-checkbox-warning" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-warning" class="[ btn btn-warning ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-warning" class="[ btn btn-default active ]"> Warning Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-danger" id="fancy-checkbox-danger" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-danger" class="[ btn btn-danger ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-danger" class="[ btn btn-default active ]"> Danger Checkbox </label> </div> </div> </div> <div class="[ col-xs-12 col-sm-6 ]"> <h3>Custom Icons Checkboxes</h3><hr /> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-default-custom-icons" id="fancy-checkbox-default-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default active ]"> Default Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-primary-custom-icons" id="fancy-checkbox-primary-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-primary ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-default active ]"> Primary Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-success-custom-icons" id="fancy-checkbox-success-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-success ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-default active ]"> Success Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-info-custom-icons" id="fancy-checkbox-info-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-info ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-default active ]"> Info Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-warning-custom-icons" id="fancy-checkbox-warning-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-warning ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-default active ]"> Warning Checkbox </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-danger-custom-icons" id="fancy-checkbox-danger-custom-icons" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-danger ]"> <span class="[ glyphicon glyphicon-plus ]"></span> <span class="[ glyphicon glyphicon-minus ]"></span> </label> <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-default active ]"> Danger Checkbox </label> </div> </div> </div> </div>
.form-group input[type="checkbox"] { display: none; } .form-group input[type="checkbox"] + .btn-group > label span { width: 20px; } .form-group input[type="checkbox"] + .btn-group > label span:first-child { display: none; } .form-group input[type="checkbox"] + .btn-group > label span:last-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child { display: none; }

Related: See More


Questions / Comments:

Hi, I can't seem how to show the checkbox as active at beginning. Can you help me?

Nacho () - 6 years ago - Reply 0


awesome!

jose manuel navarro tovar () - 6 years ago - Reply 0


I copied the code but its not working. i simply copied html n css code. what should i do.

Huzaifa Shakil Tambe () - 6 years ago - Reply 0


For those who wonder it is pure Bootstrap. Just add HTML and CSS and it is automagically done...

Maxence () - 6 years ago - Reply 0


anyone know how to add two of the same checkboxes on one page, ie if i have 2 of the success checkboxes on the same page, but i try to select the 2nd checkbox and the first one selects. ?

escaped () - 7 years ago - Reply 0


Do I have to download any theme?

fanny () - 7 years ago - Reply 0


Is there a way to span the second label, in btn-group div, the remaining width of the parent element?

Lukas Trišauskas () - 7 years ago - Reply 0


Hey not sure if you're still interested in this, but I used:
.form-group input[type="checkbox"] + .btn-group > label.btn.btn-default.active { width: 92%; }

That was specific to my needs, but that CSS selector will get you the element.

Neil Gaylor () - 7 years ago - Reply 0


great

Balaji Ramesh () - 8 years ago - Reply 0


amazing!

justeis () - 8 years ago - Reply 0


Really like it!
PS: Bootstrap should have a build-in cross-platform default appearance. Also for radios/toggles and selects.

pepperstreet () - 8 years ago - Reply 0


Como puedo adaptar esta plantilla a asp si cuando le agrego la etiqueta runat para ejecutar la accion del servidor no me deja ni chequear ni des chequear la casilla

santy () - 8 years ago - Reply 0