Overview
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
Default Preview
Code Example
<nav aria-label="Page navigation example"> <ul class="pagination d-inline-flex"> <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>
Working with icons
Code Example
<nav aria-label="Page navigation example"> <ul class="pagination d-inline-flex"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true"><em class="ni ni-chevron-left icon"></em></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"><em class="ni ni-chevron-right icon"></em></span> </a> </li> </ul> </nav>
Disabled and active states
Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
Code Example
<nav> <ul class="pagination d-inline-flex"> <li class="page-item disabled"> <a class="page-link">Previous</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</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
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
Code Example
<nav> <ul class="pagination pagination-lg d-inline-flex"> <li class="page-item active" aria-current="page"> <span class="page-link ms-0">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
Use .text-{start|center|end} to <nav> set alignment.
Code Example
<nav class="text-center"> <ul class="pagination d-inline-flex"> <li class="page-item disabled"> <a class="page-link">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>