<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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" style="padding-top:50px"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <h3>Normal</h3> <div class="list-group segmented-control"> <a href="#" class="list-group-item active"> Mo <input type="radio" checked name="items" value="item-1"/> </a> <a href="#" class="list-group-item"> Tu <input type="radio" name="items" value="item-2"/> </a> <a href="#" class="list-group-item"> We <input type="radio" name="items" value="item-3"/> </a> <a href="#" class="list-group-item"> Th <input type="radio" name="items" value="item-4"/> </a> <a href="#" class="list-group-item"> Fr <input type="radio" name="items" value="item-5"/> </a> <a href="#" class="list-group-item"> Sa <input type="radio" name="items" value="item-6"/> </a> <a href="#" class="list-group-item"> Su <input type="radio" name="items" value="item-7"/> </a> </div> </div> </div> </div>

.segmented-control input[type="radio"] { display: none; } .segmented-control .list-group-item { display: inline-block; } .segmented-control .list-group-item { margin-bottom: 0; margin-left:-4px; margin-right: 0; } .segmented-control .list-group-item:first-child { border-top-right-radius:0; border-bottom-left-radius:4px; } .segmented-control .list-group-item:last-child { border-top-right-radius:4px; border-bottom-left-radius:0; }

$(function(){ $('div.segmented-control a').on('click', function(){ $('div.segmented-control a').each(function(i,e){ $(e).removeClass('active'); }); $(this).addClass('active'); $(this).find('input').prop('checked',true); return false; }); });