<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <div class="container-fluid"> <div class="row text-center"> <h1 class="h1_custom col-md-12 text-center">Bootstrap 3 Custom Checkbox - Primary <span class="design_by">design By <strong>Shurvir Mori</strong></span></h1> </div> </div> <div class="container marT30"> <div class="col-md-6 col-md-offset-3"> <fieldset> <legend> Primary Checkbox </legend> <div class="checkbox checkbox-primary"> <input id="checkbox1" type="checkbox" checked=""> <label for="checkbox1"> Custom Checkbox Primary </label> </div> </fieldset> <!--DONT COPY THIS IN YOUR DEMO--> <fieldset class="xl"> <legend> Primary Checkbox BIG (XL) </legend> <div class="checkbox checkbox-primary"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Custom Checkbox Primary </label> </div> </fieldset> <!--Dont copy this code--> </div> </div>

/*For This Demo CSS*/ @import url('https://fonts.googleapis.com/css?family=Nunito:100,300,400,600,700'); @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); body{font-family:Nunito,arial,sans-serif !important;} .h1_custom{font-size:28px;} .design_by{font-size:20px;clear:both;display:block;margin-top:8px;} .marT30{margin-top:30px;} /*Default*/ .checkbox{padding-left:20px} .checkbox label{display:inline-block;position:relative;padding-left:5px;font-weight:400;} .checkbox label::after,.checkbox label::before{display:inline-block;position:absolute;left:0;margin-left:-20px} .checkbox label::before{content:"";width:17px;height:17px;border:1px solid #ccc;border-radius:3px;background-color:#fff;-webkit-transition:border .15s ease-in-out,color .15s ease-in-out;-o-transition:border .15s ease-in-out,color .15s ease-in-out;transition:border .15s ease-in-out,color .15s ease-in-out} .checkbox label::after{width:16px;height:16px;top:0;padding-left:3px;padding-top:1px;font-size:11px;color:#555} .checkbox input[type=checkbox]{opacity:0} .checkbox input[type=checkbox]:focus+label::before{outline:none;} .checkbox input[type=checkbox]:checked+label::after{font-family:FontAwesome;content:"\f00c"} /* Primary */ .checkbox-primary input[type=checkbox]:checked+label::before{background-color:#428bca;border-color:#428bca} .checkbox-primary input[type=checkbox]:checked+label::after{color:#fff} /*DONT COPY THIS CODE FOR XL design*/ .xl .checkbox label {font-size: 25px;height: 35px;} .xl .checkbox label::before {width: 30px;height: 30px;} .xl .checkbox label::after, .xl .checkbox label::before{margin-left:-30px} .xl .checkbox label::after {width: 30px;height: 30px;top: 0;padding-left: 4px;padding-top: 0px;font-size: 22px;} .xl {margin-top:50px;} .xl legend {font-size:25px;}