Bootstrap Pagination

Loading massive collections of data (like blog posts or store products) onto a single screen can overload users and crash basic web browsers. Pagination allows you to split that data into chunks, providing a standard numeric navigation menu at the bottom of the page.

Bootstrap styles pagination lists beautifully right out of the box.

---

1. Basic Pagination Layout

To construct a pagination menu, you should always wrap an unordered list (<ul>) inside an HTML5 semantic <nav> tag.

You need three primary classes:

• .pagination on the <ul> container.
• .page-item on the <li> elements.
• .page-link on the actual <a> hyperlink pointing to the next page.

<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="#">Next</a></li>
    </ul>
</nav>

---

2. Active and Disabled States

You must give the user visual feedback so they know exactly what page they are currently on, and if they have hit a dead end (such as the last page).

• Active State: Add .active to the current .page-item. It will turn solidly blue. Note: Also add aria-current="page" to inform screen readers!
• Disabled State: Add .disabled to a .page-item to render it gray and immediately disable hover clicking (excellent for the "Previous" link when the user is on page 1).

<!-- The first page link is 'Disabled' -->
<li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>

<!-- 'Active' pinpoints what page the current window is rendering -->
<li class="page-item active" aria-current="page">
    <a class="page-link" href="#">2</a>
</li>

---

3. Sizing Syles

Bootstrap offers quick utility modifiers to rapidly enlarge or miniaturize the massive blocks of pagination components globally.

You append .pagination-lg or .pagination-sm directly onto the <ul> container itself to scale the whole menu.

<!-- Large Pagination -->
<ul class="pagination pagination-lg">...</ul>

<!-- Small Pagination -->
<ul class="pagination pagination-sm">...</ul>

---

4. Flex Alignment

Because the pagination menu is essentially constructed using flexbox utilities, you can effortlessly push the menu perfectly into the center of the screen, or lock it against the far right corner of a data table.

• .justify-content-center forces it perfectly into the middle of the parent container.
• .justify-content-end pushes it hard to the right.

<!-- Setting alignment natively inside the UL block -->
<ul class="pagination justify-content-center">
    <li class="page-item">...</li>
</ul>