<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<div class="container">
<div class="row">
<div class="form-group">
<div class="checkbox checbox-switch switch-primary">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
</label>
</div>
</div>
</div>
</div>
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: red;
border-color: red;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255,255,255);
content: " ";
top: 0;
position: relative;
left: 0px;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
top:-2px;
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
left: 16px;top:-2px;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
background-color: rgb(0, 105, 217);
border-color: rgb(0, 105, 217);
/*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
background-color: red;
border-color: red;
/* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
