<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> 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> 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> 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> 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> 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> 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-check"></span> <span class="glyphicon glyphicon-unchecked"></span> 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-thumbs-up"></span> <span class="glyphicon glyphicon-thumbs-down"></span> 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-heart"></span> <span class="glyphicon glyphicon-heart-empty"></span> 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-play"></span> <span class="glyphicon glyphicon-pause"></span> 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> 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> 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 }