<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="[ 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> </div>

@mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .form-group-special { @include vertical-align; height: 28px; margin-left: 10px; display: inline-block; } .form-group-special input[type="checkbox"] { @include vertical-align; display: none; height: 28px; } .form-group-special .btn-group { @include vertical-align; height: 28px; } .form-group-special label.btn.btn-default { @include vertical-align; height: 28px; } .form-group-special input[type="checkbox"] + .btn-group > label span { @include vertical-align; width: 10px; display: inline-block; } .form-group-special input[type="checkbox"] + .btn-group > label span:first-child { @include vertical-align; display: none; } .form-group-special input[type="checkbox"] + .btn-group > label span:last-child { @include vertical-align; display: inline-block; } .form-group-special input[type="checkbox"]:checked + .btn-group > label span:first-child { @include vertical-align; display: inline-block; } .form-group-special input[type="checkbox"]:checked + .btn-group > label span:last-child { @include vertical-align; display: none; }