"Bootstrap 3 Custom Checkbox - Primary design By Shurvir Mori"
Bootstrap 3.3.0 Snippet by shurvirm

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: