Pagination

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

Basic example

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.

<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>

<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li>
...
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

<ul class="pagination pagination-lg">...</ul>

<ul class="pagination pagination-sm">...</ul>

Alignment

Change the alignment of pagination components with flexbox utilities.

<ul class="pagination justify-content-center">...</ul>

<ul class="pagination justify-content-end">...</ul>