<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"> <h3>Default example</h3> <div class="col-sm-12"> <div class="checkbox"> <label> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> Option one is this and that </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" checked> <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> Option two is checked by default </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> Option three is disabled </label> </div> </div> </div> </div>

.checkbox label:after, .radio label:after { content: ''; display: table; clear: both; } .checkbox .cr, .radio .cr { position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; } .radio .cr { border-radius: 50%; } .checkbox .cr .cr-icon, .radio .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 20%; } .radio .cr .cr-icon { margin-left: 0.04em; } .checkbox label input[type="checkbox"], .radio label input[type="radio"] { display: none; } .checkbox label input[type="checkbox"] + .cr > .cr-icon, .radio label input[type="radio"] + .cr > .cr-icon { transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in; } .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr { opacity: .5; }