<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="radio-toolbar"> <input type="radio" id="radioApple" name="radioFruit" value="apple" checked> <label for="radioApple">Apple</label> <input type="radio" id="radioBanana" name="radioFruit" value="banana"> <label for="radioBanana">Banana</label> <input type="radio" id="radioOrange" name="radioFruit" value="orange"> <label for="radioOrange">Orange</label> </div> </div> </div>

.radio-toolbar input[type="radio"] { opacity: 0; position: fixed; width: 0; } .radio-toolbar label { display: inline-block; background-color: #ddd; padding: 6px 20px; font-size: 13px; border:1px solid #bec0c1; border-radius: 50px; } .radio-toolbar label:hover { background-color: #ff7e008f; } .radio-toolbar input[type="radio"]:focus + label { border: 1px dashed #444; } .radio-toolbar input[type="radio"]:checked + label { background-color: #ff7e008f; border-color: #ff7e00; }