Pagination is an essential UI component that helps users navigate through large amounts of content by dividing it into multiple pages.
Bootstrap 4 provides a built-in pagination component that is easy to implement and customize.
What This Tutorial Covers:
- Basic Bootstrap 4 pagination
- Pagination sizes
- Active and disabled states
- Pagination with icons
- Alignment and positioning
- Custom styling with CSS
1. Basic Bootstrap 4 Pagination
To create pagination in Bootstrap 4, use the .pagination class and wrap it inside an unordered list (<ul>). Each page number should be wrapped inside <li> with the .page-item class, and the links should have the .page-link class.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Pagination</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<nav>
<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>
</div>
</body>
</html>
Explanation:
- .pagination is the main pagination container.
- .page-item is applied to each list item.
- .page-link styles the pagination links.
2. Pagination Sizes
Bootstrap provides two pagination sizes:
- .pagination-lg for large pagination
- .pagination-sm for small pagination
Example:
<div class="container mt-4">
<nav>
<ul class="pagination pagination-lg">
<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>
<nav>
<ul class="pagination pagination-sm mt-3">
<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>
</div>
Explanation:
- .pagination-lg makes pagination larger.
- .pagination-sm makes pagination smaller.
3. Active and Disabled States
Use .active to highlight the current page and .disabled to disable a page link.
Example:
<div class="container mt-4">
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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>
</div>
Explanation:
- .active highlights the selected page.
- .disabled grays out the link and prevents clicking.
4. Pagination with Icons
You can use Font Awesome or Bootstrap glyphicons to replace text links with icons.
Example (Using Font Awesome):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="container mt-4">
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active"><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="#"><i class="fas fa-chevron-right"></i></a>
</li>
</ul>
</nav>
</div>
Explanation:
- fa-chevron-left adds a left arrow for “Previous”.
- fa-chevron-right adds a right arrow for “Next”.
5. Alignment and Positioning
You can center-align or right-align pagination using Bootstrap’s flex utility classes.
Example: Centered Pagination
<div class="container mt-4">
<nav>
<ul class="pagination justify-content-center">
<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>
</div>
Example: Right-Aligned Pagination
<div class="container mt-4">
<nav>
<ul class="pagination justify-content-end">
<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>
</div>
Explanation:
- .justify-content-center aligns pagination in the center.
- .justify-content-end aligns pagination to the right.
6. Custom Styling with CSS
You can customize pagination with custom colors, borders, and hover effects using CSS.
Example:
<style>
.custom-pagination .page-item .page-link {
background-color: #ff5733;
color: white;
border: 1px solid #ff3300;
}
.custom-pagination .page-item.active .page-link {
background-color: #cc2900;
}
.custom-pagination .page-item .page-link:hover {
background-color: #ff3300;
}
</style>
<div class="container mt-4">
<nav>
<ul class="pagination custom-pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><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>
</div>
Explanation:
- .custom-pagination .page-link customizes the background color and borders.
- .active .page-link applies a different color for the active page.
- :hover changes the color when the user hovers.
