<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="row"> <div class="navbar navbar-default navbar-fixed-top"> <a class="navbar-brand">COIN</a> <form class="navbar-form pull-right"> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </form> </div> </div> <div class="row"> <div class="col-sm-3 col-md-2"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> Instructions <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Instructions</a></li> <li><a href="#">Administrator</a></li> <li><a href="#">Tasks</a></li> </ul> </div> </div> <div class="col-sm-9 col-md-10"> <button type="button" class="btn btn-sm" data-toggle="tooltip" title="Refresh"> <span class="glyphicon glyphicon-refresh"></span></button/> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>50</b> of <b>277</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </div> </div> <hr /> <div class="row"> <div class="col-sm-3 col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><span class="badge pull-right">42</span> Entertainment </a></li> <li><a href="#">Music & Youth</a></li> <li><a href="#">Kids & Family</a></li> <li><a href="#">My Tickets</a></li> </ul> </div> <div class="col-sm-9 col-md-10"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <div class="list-group"> </div> </div> </div> </div> </div>

body{ margin-top:50px; padding: 15px;} .tab-pane .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;} .tab-pane .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;} .tab-pane .list-group .checkbox { display: inline-block;margin: 0px; } .tab-pane .list-group input[type="checkbox"]{ margin-top: 2px; } .tab-pane .list-group .glyphicon { margin-right:5px; } .tab-pane .list-group .glyphicon:hover { color:#FFBC00; } hr { margin-top: 5px;margin-bottom: 10px; } .nav-pills>li>a {padding: 5px 10px;} .navbar-login { width: 305px; padding: 10px; padding-bottom: 0px; } .icon-size { font-size: 87px; }

$('li').click(function(){ alert('hello, world!'); });