<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="pagination"> <a href="#">« Prev</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">Next »</a> </div> <p>Total Pages (16). You are viewing Page No.: 3</p> </div> </div> </div>

.pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 12px; text-decoration: none; transition: background-color .3s; border: 1px solid #e2e2e2; margin: 0 2px 2px 0px; } .pagination a.active { background-color: #dd0000; color: white; border: 1px solid #e2e2e2; } .pagination a:hover:not(.active) {background-color: #ddd;}