<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="col-md-4 col-sm-4 col-xs-12 form-group"> <label class="labeltext">Do u Like Me ?</label><br> <div class="form-check-inline"> <label class="customradio"><span class="radiotextsty">Yes</span> <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label>         <label class="customradio"><span class="radiotextsty">No</span> <input type="radio" name="radio"> <span class="checkmark"></span> </label> </div> </div> </div> </div>

/* Custom Radio Button Start*/ .radiotextsty { color: #A5A4BF; font-size: 18px; } .customradio { display: block; position: relative; padding-left: 30px; margin-bottom: 0px; cursor: pointer; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .customradio input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: white; border-radius: 50%; border:1px solid #BEBEBE; } /* On mouse-over, add a grey background color */ .customradio:hover input ~ .checkmark { background-color: transparent; } /* When the radio button is checked, add a blue background */ .customradio input:checked ~ .checkmark { background-color: white; border:1px solid #BEBEBE; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .customradio input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .customradio .checkmark:after { top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #A3A0FB; } /* Custom Radio Button End*/