<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"> <h1>Custom Radio Buttons</h1> <label class="container">One <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container">Two <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Three <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Four <input type="radio" name="radio"> <span class="checkmark"></span> </label> </div> </div>

.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #2196F3; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }