<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="form-inline"> <div class="row"> <div class="col-xs-12 col-sm-6"> <p class="form-control-static">Displaying 1-12 of 20 results.</p> </div> <div class="text-right col-xs-12 col-sm-6"> <select class="form-control input-sm" id="pageSort" name="pageSort"> <option value="modified DESC" selected="selected">Sort: Default</option> <option value="sell_web ASC">Sort: Price (Low->High)</option> <option value="sell_web DESC">Sort: Price (High->Low)</option> <option value="title ASC">Sort: Name (A->Z)</option> <option value="title DESC">Sort: Name (Z->A)</option> <option value="inventory_avail DESC">Sort: Availability</option> </select> </div> </div> </div> <div id="productlist" class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail" > <h4 class="text-center"><span class="label label-info">Samsung</span></h4> <img src="http://placehold.it/650x450&text=Galaxy S5" class="img-responsive"> <div class="caption"> <div class="row"> <div class="col-md-6 col-xs-6"> <h3>Galaxy S5</h3> </div> <div class="col-md-6 col-xs-6 price"> <h3> <label>$649.99</label></h3> </div> </div> <p>32GB, 2GB Ram, 1080HD, 5.1 inches, Android</p> <div class="row"> <div class="col-md-6"> <a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a> </div> <div class="col-md-6"> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div> </div> <p> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail" > <h4 class="text-center"><span class="label label-info">Apple</span></h4> <img src="http://placehold.it/650x450&text=iPhone 6" class="img-responsive"> <div class="caption"> <div class="row"> <div class="col-md-6 col-xs-6"> <h3>iPhone 6</h3> </div> <div class="col-md-6 col-xs-6 price"> <h3> <label>$749.99</label></h3> </div> </div> <p>32GB, 64Bit, 1080HD, 4.7 inches, iOS 8</p> <div class="row"> <div class="col-md-6"> <a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a> </div> <div class="col-md-6"> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div> </div> <p> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail" > <h4 class="text-center"><span class="label label-info">Nokia</span></h4> <img src="http://placehold.it/650x450&text=Lumia 1520" class="img-responsive"> <div class="caption"> <div class="row"> <div class="col-md-6 col-xs-6"> <h3>Lumia 1520</h3> </div> <div class="col-md-6 col-xs-6 price"> <h3> <label>$749.00</label></h3> </div> </div> <p>32GB, 4GB Ram, 1080HD, 6.3 inches, WP 8</p> <div class="row"> <div class="col-md-6"> <a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a> </div> <div class="col-md-6"> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div> </div> <p> </p> </div> </div> </div> </div> <div class="form-inline"> <div class="row"> <div class="col-xs-12 col-sm-4"> <p class="form-control-static">Displaying 1-12 of 20 results.</p> </div> <div class="col-xs-12 col-sm-8"> <ul class="pagination pagination-sm" id="productPager"> <li class="first disabled"><a href="#">First</a></li> <li class="previous disabled"><a href="#"><</a></li> <li class="page active"><a href="#">1</a></li> <li class="page"><a href="#">2</a></li> <li class="page"><a href="#">3</a></li> <li class="page"><a href="#">4</a></li> <li class="next"><a href="#">></a></li> <li class="last"><a href="#">Last</a></li> </ul> <select class="form-control input-sm pull-right" id="pageSize" name="pageSize"> <option value="12" selected="selected">Show: 12</option> <option value="24">Show: 24</option> <option value="48">Show: 48</option> <option value="9999">Show: All</option> </select> </div> </div> </div> </div>

.container { margin: 20px auto; } #productlist { margin: 20px -15px; } .pagination { margin: 0; } @media (min-width: 768px) { #productPager { text-align: left; } } #pageSize { margin-left:15px; }