Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

16 of 39
BS5 Progress BarsBS5 SpinnersBS5 PaginationBS5 List GroupsBS5 Cards

📄 BS5 Pagination

📌 What Is Bootstrap 5 Pagination?

Pagination lets users move between pages (e.g. search results). Use .pagination on a <ul>, .page-item on each <li>, and .page-link on the <a> inside. Wrap in <nav> with aria-label for accessibility.

📄 Basic Pagination (.pagination, .page-item, .page-link)

.pagination – wrapper on the list. .page-item – each page or arrow. .page-link – the clickable link inside. Use .active on the current page’s .page-item. Use .disabled on the .page-item for Previous/Next when not available.

Example02
Loading editor…

⬅️➡️ Disabled and Active States (.active, .disabled)

.active – highlights the current page. .disabled – grays out and prevents click (e.g. “Previous” on page 1). Add tabindex="-1" to disabled links for keyboard users.

Example03
Loading editor…

📏 Pagination Sizes (.pagination-lg, .pagination-sm)

.pagination-lg – larger pagination. .pagination-sm – smaller. Add to the <ul class="pagination">.

Example04
Loading editor…

✅ Pagination Best Practices

  • Use <nav> and aria-label so screen readers know it’s page navigation.
  • Disable Previous/Next on first/last page with .disabled and tabindex="-1".
  • Mark current page with .active on the corresponding .page-item.

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3