Pagination
Pagination divides content into sections that display on different pages and helps users consume content by making it more consumable and scannable.
Usage
Pagination should be used to list content such as news stories, events, person profiles, and other types of content that are typically consumed by date, in alphabetical order, or in categorial lists.
Examples
Default
Pagination markup
<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>
Disabled and Active States
Pagination with disabled and active states markup
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled"><a aria-disabled="true" class="page-link" href="#" tabindex="-1">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li aria-current="page" class="page-item active"><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>