Pagination

Default

Use .pagination with .pagination-item to create a simple pagination navigation.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

Active item

Use .is-active and aria-current=“page” to mark the current page.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
</nav>

Disabled item

Use .disabled for pagination items that are not available.

<nav class="pagination" aria-label="Pagination">
	<span class="pagination-item disabled">Previous</span>
	<a class="pagination-item is-active" href="#" aria-current="page">1</a>
	<a class="pagination-item" href="#">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

Button pagination

Pagination items can also be buttons when navigation is handled with JavaScript.

<nav class="pagination" aria-label="Pagination">
	<button class="pagination-item" type="button" disabled>Previous</button>
	<button class="pagination-item is-active" type="button" aria-current="page">1</button>
	<button class="pagination-item" type="button">2</button>
	<button class="pagination-item" type="button">3</button>
	<button class="pagination-item" type="button">Next</button>
</nav>

With ellipsis

Use .pagination-ellipsis for skipped page ranges.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<span class="pagination-item pagination-ellipsis">…</span>
	<a class="pagination-item" href="#">8</a>
	<a class="pagination-item is-active" href="#" aria-current="page">9</a>
	<a class="pagination-item" href="#">10</a>
	<span class="pagination-item pagination-ellipsis">…</span>
	<a class="pagination-item" href="#">20</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

Centered pagination

Use flex utilities to align pagination.

<nav class="pagination justify-content-center" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

End aligned pagination

Use .justify-content-end to align pagination to the end.

<nav class="pagination justify-content-end" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>