Pagination
Examples for showing pagination to indicate a series of related content exists across multiple pages.
Basic Examples
The following example of basic pagination. Use .pagination class as parent <ul> and .page-link class of <a> element.
Code Example
<div><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"><span class="page-link"><em class="icon ni ni-more-h"></em></span></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li></ul></div>
Working with Icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.
Code Example
<nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Prev"><span aria-hidden="true">«</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">»</span></a> </li> </ul></nav>
Disabled and Active States
Use .disabled for links that appear un-clickable and .active to indicate the current page.
Code Example
<nav> <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"><a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></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>
Sizing
Add .pagination-{sm|lg|xl} with .pagination main class for additional sizes.
Code Example
<nav> <ul class="pagination pagination-lg"> <li class="page-item active" aria-current="page"><span class="page-link">1</span></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> </ul></nav>
Alignment
Change the alignment of pagination components with flexbox utilities as use .justify-content-{start|center|end} to set alignment.
Code Example
<nav> <ul class="pagination justify-content-center"> <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
