Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Pagination Component in Bootstrap 5
Pagination: Navigation component for splitting content across multiple pages.
Basic Pagination
Simple Pagination
<!-- 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>Active and Disabled States
Active State
activeDisabled State
disabledPagination Sizes
Size Variations
Small
pagination-smDefault
pagination (default)Large
pagination-lgPagination Alignment
Left Aligned
justify-content-startCenter Aligned
justify-content-centerRight Aligned
justify-content-endAdvanced Pagination Examples
Complex Pagination Patterns
With First and Last
With Ellipsis
Custom Icons
Working Example with Data
Real-World Example: Blog Posts
Showing 1-10 of 50 items
<!-- Complete pagination example -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="mb-0">Showing 1-10 of 50 items</h6>
<div class="form-group mb-0">
<select class="form-select form-select-sm">
<option>10 per page</option>
<option>25 per page</option>
<option>50 per page</option>
</select>
</div>
</div>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item active">
<span class="page-link">1</span>
</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 disabled">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>Accessibility Features
Accessibility Best Practices
- Use
navelement for navigation regions - Add
aria-labelto describe the navigation - Use
aria-current="page"for current page - Add proper labels for previous/next buttons
- Ensure keyboard navigation works
- Use semantic HTML structure
Best Practices
Do's
- ✅ Keep pagination visible and accessible
- ✅ Show current page clearly
- ✅ Include previous/next buttons
- ✅ Make it responsive
- ✅ Add ellipsis for many pages
- ✅ Include item count if possible
Don'ts
- ❌ Don't show too many page links
- ❌ Avoid hiding pagination on mobile
- ❌ Don't forget accessibility labels
- ❌ Avoid tiny click targets
- ❌ Don't use confusing icons
- ❌ Avoid inconsistent styling
