Bootstrap snippet: Fancy Bootstrap Checkboxes

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<div class="container"> <div class="[ row ]"> <h2>Fancy Bootstrap Checkboxes</h2> </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>
body{margin-top:20px;} .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; }
srinutest

Fancy Bootstrap Checkboxes

srinutest
  Apr 6th, 22:34
196 Views