<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 ----------> <br/><br/> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Everything</button> <button type="button" class="btn btn-default">Chat</button> <button type="button" class="btn btn-default">Issues</button> <button type="button" class="btn btn-default">Reviews</button> <!--button type="button" class="btn btn-default">Announcements</button--> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-9 text-right"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-gray dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Filters <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control" placeholder="Search" aria-label="..."> </div><!-- /input-group --> </div> <div class="col-md-3 text-right"> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Add Item <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">General Chat</a></li> <li><a href="#">Issue</a></li> <li><a href="#">Review</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="topcis-header"> <div class="row"> <div class="col-md-10"> </div> <div class="col-md-2 text-right"> <div class="btn-group"> <button type="button" class="btn btn-gray borderless dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Sort By <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Date Desc</a></li> <li><a href="#">Date Asc</a></li> <li><a href="#">Rating</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> </div> </div> </div>

.btn-gray { color: #fff; background-color: #eee; border-color: #ccc; color: #000; } .btn.borderless { border: none; background:inherit; } .btn.borderless.dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; } .rb { border-right: 1px solid #ccc; } .topcis-header { margin-top: 20px; margin-bottom: -1px; background-color: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 3px 3px 0 0; padding-top:5px; padding-bottom:5px; }