Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
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 pagination
-->
<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>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.
<!-- working with icons
-->
<nav aria-label="Page navigation
example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<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>Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate
the current page.
<!-- disabled and active states
-->
<nav aria-label="...">
<ul class="pagination">
<li class="page-item
disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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 <span class="sr-only">(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>Fancy larger or smaller pagination? Add .pagination-lg or
.pagination-sm for additional sizes.
<!-- sizing -->
<nav aria-label="...">
<ul class="pagination
pagination-lg">
<li class="page-item
active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
</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> <!-- collapse -->
<nav aria-label="...">
<ul class="pagination
pagination-sm">
<li class="page-item
active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
</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>Change the alignment of pagination components with flexbox utilities.
<!-- center alignment
-->
<nav aria-label="Page navigation
example">
<ul class="pagination
justify-content-center">
<li class="page-item
disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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> <!-- right alignment
-->
<nav aria-label="Page navigation
example">
<ul class="pagination
justify-content-end">
<li class="page-item
disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>