<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"> <div class="container"> <h2>Checkboxes</h2> <form role="form"> <div class="row"> <div class="col-md-4"> <fieldset> <legend> Basic </legend> <p> Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc. </p> <div class="checkbox"> <span>Supports bootstrap</span> <input id="checkbox1" type="checkbox" class="pull-right"> <label for="checkbox1">   </label> </div> <div class="checkbox checkbox-primary"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Primary </label> </div> <div class="checkbox checkbox-success"> <input id="checkbox3" type="checkbox" checked=""> <label for="checkbox3"> Success </label> </div> <div class="checkbox checkbox-info"> <input id="checkbox4" type="checkbox"> <label for="checkbox4"> Info </label> </div> <div class="checkbox checkbox-warning"> <input id="checkbox5" type="checkbox" checked=""> <label for="checkbox5"> Warning </label> </div> <div class="checkbox checkbox-danger"> <input id="checkbox6" type="checkbox" checked=""> <label for="checkbox6"> Check me out </label> </div> <p>Inline checkboxes</p> <div class="checkbox checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> <label for="inlineCheckbox1"> Inline One </label> </div> <div class="checkbox checkbox-success checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option1" checked=""> <label for="inlineCheckbox2"> Inline Two </label> </div> <div class="checkbox checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option1"> <label for="inlineCheckbox3"> Inline Three </label> </div> </fieldset> </div> </div> </form> </div>

.checkbox { /*padding-left: 20px;*/ } .checkbox label { display: inline-block; position: relative; padding-left: 5px; } .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .checkbox input[type="checkbox"] { opacity: 0; } .checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox input[type="checkbox"]:checked + label::after { font-family: 'FontAwesome'; content: "\f00c"; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #428bca; border-color: #428bca; } .checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-danger input[type="checkbox"]:checked + label::before { background-color: #d9534f; border-color: #d9534f; } .checkbox-danger input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-info input[type="checkbox"]:checked + label::before { background-color: #5bc0de; border-color: #5bc0de; } .checkbox-info input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-warning input[type="checkbox"]:checked + label::before { background-color: #f0ad4e; border-color: #f0ad4e; } .checkbox-warning input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-success input[type="checkbox"]:checked + label::before { background-color: #5cb85c; border-color: #5cb85c; } .checkbox-success input[type="checkbox"]:checked + label::after { color: #fff; }