<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 mt-5"> <div class="ans_checkbox"> <input type="checkbox" name="rGroup" value="1" id="r1"/> <label class="checkbox-alias" for="r1"><div class="ans_abc">1</div> Option 1</label> <input type="checkbox" name="rGroup" value="2" id="r2"/> <label class="checkbox-alias" for="r2"><div class="ans_abc">2</div> Option 2</label> <input type="checkbox" name="rGroup" value="3" id="r3"/> <label class="checkbox-alias" for="r3"><div class="ans_abc">3</div> Option 3</label> <input type="checkbox" name="rGroup" value="3" id="r4"/> <label class="checkbox-alias" for="r4"><div class="ans_abc">4</div> Option 4</label> </div> </div>

.checkbox-alias{ background-color: #f9f9f9; display: inline-block; width: 47%; z-index: 1; position: relative; transition: all 250ms ease-out; cursor: pointer; border: 1px solid #efefef; padding: 12px 12px; } .ans_checkbox input[type=checkbox]{ display: none; margin-right: -20px; position: relative; z-index: 2; } .ans_checkbox input[type=checkbox]:checked + .checkbox-alias{ border-color: #5555F2; background: #5555f240; color: #000; } .ans_abc{ background: #5555F2; display: inline-block; width: 25px; height: 25px; color: #fff; text-align: center; border-radius: 50px; margin-right: 9px; padding-top: 1px; }