<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"> <h2>Beautiful pagination</h2> </div> </div> <div class="container"> <div class="paginate" style="width:600px"><!-- remove width id you don't need it--> <ul class="pagination"> <li><a href="#"rel="prev" class="page-prev"><span class="glyphicon glyphicon-chevron-left"></span></a></li> <li class="active "><span>1</span></li> <li><a href="#" class=" ">2</a></li> <li><a href="#" class=" ">3</a></li> <li><a href="#" rel="next" class="page-next"><span class="glyphicon glyphicon-chevron-right"></span></a></li> </ul> <div class="clearfix"></div> </div> </div>

.paginate{position: relative;} .pagination>li>a, .pagination>li>span { padding: 6px 16px; margin-left: 3px; margin-right: 3px; line-height: 1.42857143; color: #337ab7; background-color: #ECF0F1; border: 0px; font-size: 20px; } .pagination>li>a.page-prev, .pagination>li>span.page-prev,.pagination>li>a.page-next, .pagination>li>span.page-next { background-color: #1478B8; color: #FFF; } .pagination>li>a.page-prev, .pagination>li>span.page-prev{ position: absolute; right: 60px; } .pagination>li>a.page-next, .pagination>li>span.page-next{ position: absolute; right: 0px; }