<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="pull-right"> <button class="btn btn-default btn-md btn-shadow"> <span class="glyphicon glyphicon-file"></span> Save Excel </button>    <button class="btn btn-default btn-md btn-shadow"> Reports List </button>    <div class="btn-group btn-group-md"> <button type="button" class="btn btn-default btn-shadow"> <span class="glyphicon glyphicon-th-large"></span> </button> <button type="button" class="btn btn-default btn-shadow"> <span class="glyphicon glyphicon-map-marker"></span> </button> </div> </div> <br/><br/><br/> <div class="row"> <div class="col-md-6"> <div class="form-inline"> <div class="form-group"> <span class="text-muted">Rows per page   </span> <select class="form-control input-md" style="border-radius: 20px;"> <option> 5</option> <option>10</option> <option>25</option> </select> </div> </div> </div> <div class="col-md-6"> <div class="pull-right"> <div class="form-group"> <span class="text-muted">Showing 1 to 10 of 57   </span> <div class="btn-group btn-group-md"> <button type="button" class="btn btn-default btn-round btn-shadow"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default btn-round btn-shadow"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </div> </div> </div> </div>

.btn-shadow{ -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.22); -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.22); box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.22); } .no-border{ border-radius: 0px; } .btn-round{ border-radius: 100px; }