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>