Pagination
Overview
Pagaination Basic
This is the basic Bootstrap pagaination.
<!-- Pagaination Basic -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</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>
Pagaination Advanced
Our theme's pagination is derived from Bootstrap with modified styling.
<!-- Pagination Advanced -->
<div class="row">
<div class="col-12">
<nav class="d-flex justify-content-between align-items-center pt-2"
aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><button type="button"
class="btn btn-brand-primary-reverse rounded-pill btn-xl arrow-prev"
href="#"><i data-feather="arrow-left" width="18" height="18"
stroke-width="2"></i> Prev</button></li>
</ul>
<ul class="pagination rounded-pill">
<li class="page-item active d-none d-sm-block" aria-current="page"><span
class="page-link">1<span
class="visually-hidden">(current)</span></span>
</li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">2</a>
</li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">3</a>
</li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">4</a>
</li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">5</a>
</li>
</ul>
<ul class="pagination">
<li class="page-item"><button type="button"
class="btn btn-brand-primary-reverse rounded-pill btn-xl arrow-next"
href="#" aria-label="Next">Next <i data-feather="arrow-right"
width="18" height="18" stroke-width="2"></i></button></li>
</ul>
</nav>
</div>
</div>