<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"> <div class="row"> <div class="check-box-sec"> <label class="container-box">Select lessee <input type="checkbox" name="li[]" class="lessee_chk" value="3"> <span class="checkmark"></span> </label> </div> </div> </div>

/* The container-box */ .container-box { display: block; position: relative; padding-left: 35px; margin-bottom: 5px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #333; } /* Hide the browser's default checkbox */ .container-box input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container-box:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container-box input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container-box input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container-box .checkmark:after { left: 8px; top: 5px; width: 8px; height: 13px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .check-box-sec { border-top: 1px solid #f1f1f1; padding-top: 10px; margin-top: 8px; }