<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 ----------> <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="custom-radios"> <div> <input type="checkbox" id="color-1" name="color" value="color-1" checked> <label for="color-1"> <span> </span> </label> </div> <div> <input type="checkbox" id="color-2" name="color" value="color-2"> <label for="color-2"> <span> </span> </label> </div> <div> <input type="checkbox" id="color-3" name="color" value="color-3"> <label for="color-3"> <span> </span> </label> </div> <div> <input type="checkbox" id="color-4" name="color" value="color-4"> <label for="color-4"> <span> </span> </label> </div> </div> </div> </div>

html, body { height: 100%; width: 100%; margin: 0; } .custom-radios div { display: inline-block; } .custom-radios input[type="checkbox"] { display: none; } .custom-radios input[type="checkbox"] + label { color: #333; font-family: Arial, sans-serif; font-size: 14px; } .custom-radios input[type="checkbox"] + label span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border: 2px solid #FFFFFF; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33); background-repeat: no-repeat; background-position: center; text-align: center; line-height: 44px; margin-top:10px; } .custom-radios input[type="checkbox"] + label span img { opacity: 0; transition: all .3s ease; } .custom-radios input[type="checkbox"]#color-1 + label span { background-color: #3498db; } .custom-radios input[type="checkbox"]#color-2 + label span { background-color: #3498db; } .custom-radios input[type="checkbox"]#color-3 + label span { background-color: #3498db; } .custom-radios input[type="checkbox"]#color-4 + label span { background-color: #3498db; } .custom-radios input[type="checkbox"]:checked + label span { opacity: 1; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg) center center no-repeat; width: 40px; height: 40px; display: inline-block; }