Estimated reading: 4 minutes 11 views

🔢 Bootstrap 5 – Pagination: Create Navigable Page Links with Ease

🧲 Introduction – What Is Pagination in Bootstrap 5?

Pagination in Bootstrap 5 is a component used to split content into multiple pages and provide navigation links for users to access different parts of the dataset. It’s commonly used in blogs, tables, product listings, or any interface that handles large data sets.

🎯 In this guide, you’ll learn:

How to implement basic and advanced pagination
Customize alignment, size, and states (active, disabled)
Make pagination responsive and accessible
Best practices for UX-friendly page navigation

✅ Example 1 – Basic Pagination

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

🔍 Explanation:

Class	Description
`.pagination`	Wrapper for the list of pagination links
`.page-item`	Container for each page element
`.page-link`	Styled link for each page
`aria-label`	Accessibility label for screen readers

✅ Example 2 – Active and Disabled States

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
  </li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active" aria-current="page">
    <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>

🔍 Highlights:

.active: Highlights the current page
.disabled: Grays out links like “Previous” on the first page
aria-current="page": Enhances accessibility by indicating the current page

✅ Example 3 – Pagination Size (Large/Small)

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<ul class="pagination pagination-sm mt-3">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

🔍 Sizes:

.pagination-lg: Large size
.pagination-sm: Small size
Omit size class for default

✅ Example 4 – Center or Right Align Pagination

<!-- Center align -->
<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

<!-- Right align -->
<nav>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

🔍 Alignment Classes:

justify-content-center: Centers pagination
justify-content-end: Aligns pagination to the right

🛠️ Best Practices for Pagination UI

Tip	Why It Helps
Always show disabled `Previous/Next`	Prevents confusion and sets boundaries
Highlight the current page	Keeps users oriented
Use ellipsis for large page ranges	Reduces clutter in the UI
Keep pagination accessible	Use `aria-label`, `aria-current`, `aria-disabled`
Provide alternative navigation	Include “Jump to” or filter controls for large sets

📌 Summary – Bootstrap Pagination for Clean Navigation

Bootstrap 5 makes pagination intuitive and accessible, whether you’re navigating articles, products, or data tables. With alignment, size, and styling options, it adapts to any layout requirement.

🔍 Key Takeaways:

Use .pagination, .page-item, .page-link for structure
Add .active, .disabled, and aria-* for UX and accessibility
Align using flex utilities like justify-content-*
Supports small, default, and large sizes

⚙️ Ideal for blogs, tables, admin panels, and directory-based web apps.

❓ FAQs – Bootstrap 5 Pagination

❓ How do I disable a page item in Bootstrap pagination?
✅ Add .disabled to the .page-item and aria-disabled="true" to the link.

❓ Can I highlight the current page?
✅ Yes, use .active on the .page-item and aria-current="page" on the link.

❓ How can I center Bootstrap pagination?
✅ Add the class justify-content-center to the .pagination list.

❓ Is Bootstrap pagination accessible?
✅ Yes, when using proper aria attributes like aria-label, aria-current, and aria-disabled.

« Previous Next »

Share Now :