Pagination
- Home
- Pagination
Style 1
<div class="pagination radius-5 d-block">
<ul>
<li><a href="#!"><i class="fas fa-long-arrow-alt-left me-2"></i> Prev</a></li>
<li class="active"><a href="#!">1</a></li>
<li><a href="#!">2</a></li>
<li><a href="#!">3</a></li>
<li><a href="#!">Next<i class="fas fa-long-arrow-alt-right ms-2"></i></a></li>
</ul>
</div>
Style 2
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a href="#" class="me-0 border-end-0">Previous</a></li>
<li class="page-item"><a href="#" class="me-0 border-end-0">1</a></li>
<li class="page-item"><a href="#" class="me-0 border-end-0">2</a></li>
<li class="page-item"><a href="#" class="me-0 border-end-0">3</a></li>
<li class="page-item"><a href="#">Next</a></li>
</ul>
</nav>
Style 3
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="me-0 border-end-0" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="page-item"><a class="me-0 border-end-0" href="#">1</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#">2</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
Style 4
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="me-0 border-end-0" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active" aria-current="page"><a class="me-0 border-end-0" href="#">1</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#">2</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#">3</a></li>
<li class="page-item"><a href="#">Next</a>
</li>
</ul>
</nav>