Elements
These modular elements can be readily used and customized across pages and in different blocks.
pagination <> show code
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-left" aria-hidden="true"></i></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="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
</ul>
</nav>
How to use
Pagination links indicate a series of related content exists across multiple pages.
- All style are done using bootstrap 4 default classes
- use .active class with .page-item to specify the active page
Example
Alignment <> show code
<!-- Middle/center align -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1"><i class="fa fa-angle-left" aria-hidden="true"></i></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="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</li>
</ul>
</nav>
<!-- Right align -->
<ul class="pagination justify-content-end">
....
</ul>
How to use
- use .justify-content-center for middle align
- use .justify-content-end for right align
Left Align (default)
Middle Align
Right align