เวอร์ชั่น 1.0 by bootstrap 3.3.7
<div class="pagination-block">
<div class="pagination">
<ul class="nav-list">
<li>
<a href="#" class="link">PREV</a>
</li>
<li class="active">
<a href="#" class="link">1</a>
</li>
<li>
<a href="#" class="link">2</a>
</li>
<li>
<a href="#" class="link">3</a>
</li>
<li>
<a href="#" class="link">4</a>
</li>
<li>
<a href="#" class="link">5</a>
</li>
<li>
<a href="#" class="link">NEXT</a>
</li>
</ul>
</div>
</div>
.pagination-block{text-align: center;}
.pagination{margin: 0; display: inline-block;}
.pagination .link{display: block;
min-width: 40px;
height: 40px;
padding: 0 10px;
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 40px;
color: #fff;
background-color: #333;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.pagination .link:hover{background-color: #000; color: #fff;}
.pagination .active .link{background-color: #000; color: #fff;}
.pagination li{display: inline-block; vertical-align: middle;}
.pagination li + li{margin-left: 6px;}