<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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">
<h2 class="text-center my-5 text-uppercase font-weight-bold">Checkboxes Styling</h2>
<div class="row">
<div class="col-md-6">
<img src="https://picsum.photos/600/300" class="img-fluid" alt="picsum">
</div>
<div class="col-md-6">
<div class="example1">
<div><input type="checkbox" name="selectall1" id="selectall1" class="all" value="1"> <label for="selectall1">Select all</label></div>
<div><input type="checkbox" name="check[]" id="check1" value="1"> <label for="check1">1. checkbox</label></div>
<div><input type="checkbox" name="check[]" id="check2" value="2"> <label for="check2">2. checkbox</label></div>
<div><input type="checkbox" name="check[]" id="check3" value="3"> <label for="check3">3. checkbox</label></div>
<div><input type="checkbox" name="check[]" id="check4" value="4"> <label for="check4">4. checkbox</label></div>
</div>
</div>
</div>
</div>
input[type="radio"]:focus,
.radio input[type="radio"]:focus,
.radio-inline input[type="radio"]:focus {
outline: none
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before,
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before {
position: absolute;
left: 0;
top: -3px;
background-color: #0099a8;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
position: relative;
top: -3px;
border: 2px solid #cbcbcb
}
input[type="radio"]:checked:before,
.radio input[type="radio"]:checked:before,
.radio-inline input[type="radio"]:checked:before {
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5)
}
input[type="radio"]:disabled:checked:before,
.radio input[type="radio"]:disabled:checked:before,
.radio-inline input[type="radio"]:disabled:checked:before {
background-color: #bbbbbb
}
input[type="radio"]:checked:after,
.radio input[type="radio"]:checked:after,
.radio-inline input[type="radio"]:checked:after {
border-color: #0099a8
}
input[type="radio"]:disabled:after,
.radio input[type="radio"]:disabled:after,
.radio-inline input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after,
.radio input[type="radio"]:disabled:checked:after,
.radio-inline input[type="radio"]:disabled:checked:after {
border-color: #bbbbbb
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: relative;
border: none;
margin-bottom: -4px;
-webkit-appearance: none;
appearance: none;
cursor: pointer
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
outline: none
}
input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
border-color: #0099a8
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -2px;
margin-right: 5px;
border: 2px solid #cbcbcb;
border-radius: 2px;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
content: "";
position: absolute;
top: 0;
left: 6px;
display: table;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after {
background-color: #0099a8;
border-color: #0099a8
}
input[type="checkbox"]:disabled:after,
.checkbox input[type="checkbox"]:disabled:after,
.checkbox-inline input[type="checkbox"]:disabled:after {
border-color: #bbbbbb
}
input[type="checkbox"]:disabled:checked:after,
.checkbox input[type="checkbox"]:disabled:checked:after,
.checkbox-inline input[type="checkbox"]:disabled:checked:after {
background-color: #bbbbbb;
border-color: transparent
}
