Basic Pagination
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Active & Disabled Pagination
Pagination links are customizable for different circumstances. Use.disabled for links that appear un-clickable and .active to indicate the current page.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><i class="ion-ios-arrow-back"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><i class="ion-ios-arrow-forward"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Round Page Item
Adding.pagination-round on .pagination you can get round corner of page item
<nav aria-label="Page navigation example">
<ul class="pagination pagination-space pagination-round">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><i class="ion-ios-arrow-back"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><i class="ion-ios-arrow-forward"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Pagination Sizing
Fancy larger or smaller pagination? Add.pagination-lg or .pagination-sm for additional sizes.
<nav aria-label="Page navigation example">
<ul class="pagination pagination-*">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Arrow Pagination
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><i class="ion-ios-arrow-back"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><i class="ion-ios-arrow-forward"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Space Between Page Item
Add.pagination-space on .pagination for space between page item
<nav aria-label="Page navigation example">
<ul class="pagination pagination-space">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Pill Page Item
Adding.pagination-pill on .pagination you can get pill corner of page item
<nav aria-label="Page navigation example">
<ul class="pagination pagination-space pagination-pill">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><i class="ion-ios-arrow-back"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><i class="ion-ios-arrow-forward"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Color Variants
Different color variants for pagination. You can use these with prefix.pagination-* and get like: primary, danger, brand etc...
<nav aria-label="Page navigation example">
<ul class="pagination pagination-*">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>