<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="well well-sm text-center"> <h3>Radio</h3> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-none"></span> </label> <label class="btn btn-confirm"> <input background="red" type="radio" name="options" id="option2" autocomplete="off" chacked> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-reject"> <input type="radio" name="options" id="option1" autocomplete="off"> <span class="glyphicon glyphicon-remove"></span> </label> <label class="btn btn-remove"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-trash"></span> </label> </div> </div> </div>

.btn span.glyphicon { opacity: 0; } .btn.active span.glyphicon { opacity: 1; } .btn-confirm:hover, .btn-confirm:focus, .btn-confirm:active, .btn-confirm.active, .btn-confirm { color: #fff; background-color: #0FB600; border-color: #398439; } .btn-reject:hover, .btn-reject:focus, .btn-reject:active, .btn-reject.active, .btn-reject { color: #fff; background-color: #F70; border-color: #d60; } .btn-remove:hover, .btn-remove:focus, .btn-remove:active, .btn-remove.active, .btn-remove { color: #fff; background-color: #f00; border-color: #d00; } .glyphicon-none:before { content: "\2122"; color: transparent !important; } .btn-remove:hover{ color: #fff; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .glyphicon-default:before { content: "\e013"; }