Nearby lessons
16 of 39📄 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.
⬅️➡️ 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.
📏 Pagination Sizes (.pagination-lg, .pagination-sm)
.pagination-lg – larger pagination. .pagination-sm – smaller. Add to the <ul class="pagination">.
✅ Pagination Best Practices
- Use <nav> and aria-label so screen readers know it’s page navigation.
- Disable Previous/Next on first/last page with
.disabledandtabindex="-1". - Mark current page with
.activeon the corresponding.page-item.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 List Groups