<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h4>Role</h4> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-round btn-default active"> <input type="radio">Ana </label> <label class="btn btn-default"> <input type="radio">Senkron </label> <label class="btn btn-round btn-default"> <input type="radio">Yan </label> </div> </div> <div class="row"> <h4>Role</h4> <div class="btn-group btn-group-vertical" data-toggle="buttons"> <label class="btn btn-round btn-default active"> <input type="radio">Ana </label> <label class="btn btn-default"> <input type="radio">Senkron </label> <label class="btn btn-round btn-default"> <input type="radio">Yan </label> </div> </div> </div>

.btn-round-lg{ border-radius: 22.5px; } .btn-round{ border-radius: 17px; } .btn-round-sm{ border-radius: 15px; } .btn-round-xs{ border-radius: 11px; padding-left: 10px; padding-right: 10px; } .btn-group .active { background-color: #2ecc71 ; color: white; }