<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="rdo-grp"> <input id="rdo1" type="radio" name="radio"/> <label for="rdo1"><span></span><span>One</span></label> <input id="rdo2" type="radio" name="radio"/> <label for="rdo2"><span></span><span>Two</span></label> <input id="rdo3" type="radio" name="radio"/> <label for="rdo3"><span></span><span>Three</span></label> <input id="rdo4" type="radio" name="radio"/> <label for="rdo4"><span></span><span>Four</span></label> </div>

.rdo-grp { position: absolute; top: calc(50% - 10px); } .rdo-grp label { cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 6px 8px; border-radius: 20px; float: left; transition: all 0.2s ease; } .rdo-grp label:hover { background: rgba(125,100,247,0.06); } .rdo-grp label:not(:last-child) { margin-right: 16px; } .rdo-grp label span { vertical-align: middle; } .rdo-grp label span:first-child { position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: #e8eaed; border-radius: 50%; transition: all 0.2s ease; margin-right: 8px; } .rdo-grp label span:first-child:after { content: ''; position: absolute; width: 16px; height: 16px; margin: 2px; background: #fff; border-radius: 50%; transition: all 0.2s ease; } .rdo-grp label:hover span:first-child { background: #7d64f7; } .rdo-grp input { display: none; } .rdo-grp input:checked + label span:first-child { background: #7d64f7; } .rdo-grp input:checked + label span:first-child:after { transform: scale(0.5); } body { -webkit-font-smoothing: antialiased; font-family: sans-serif; display: flex; justify-content: center; }