Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic Pagination

<nav>
    <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 active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

With Icons

<nav>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
    </ul>
</nav>

Sizing

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

Alignment

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