Bootstrap Pagination
What is Pagination?
Pagination is a way to divide long lists or large amounts of content into smaller, easy-to-navigate pages. It helps users quickly find what they need without scrolling through too much information.
Basic Pagination
To create a simple pagination layout in Bootstrap, use:
• .pagination → Creates the pagination container.
• .page-item → Defines each page button.
• .page-link → Styles the link inside each page button.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Pagination</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
</head>
<body class=”p-4″>
<nav>
<ul class=”pagination”>
<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>
</ul>
</nav>
</body>
</html>
Output:
in this example:
This creates basic pagination with three-page numbers. Clicking them doesn’t load new pages yet (we will add functionality later).
Centered Pagination
Use .justify-content-center to align pagination in the center.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Pagination</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
</head>
<body class=”p-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>
</body>
</html>
Output:
In this example.
The pagination is now centered on the screen.
Pagination with Disabled and Active States
Here are some creative examples to inspire your design:
• .disabled → Disables a button (users can’t click it).
• .active → Highlights the current page.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Pagination</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
</head>
<body class=”p-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>
</body>
</html>
Output:
In this example:
“Previous” button is disabled, and page 2 is highlighted as the current page.
Pagination with Icons
You can use left («) and right (») icons instead of text.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Pagination</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
</head>
<body class=”p-4″>
<nav>
<ul class=”pagination”>
<li class=”page-item”>
<a class=”page-link” href=”#” aria-label=”Previous”>
<span aria-hidden=”true”>«</span>
</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=”#” aria-label=”Next”>
<span aria-hidden=”true”>»</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Output:
In this Example:
The “Previous” and “Next” buttons now use arrow icons (« and »).
Dynamic Pagination with JavaScript
Let’s make pagination work dynamically using JavaScript.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dynamic Pagination</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
</head>
<body class=”p-4″>
<h3>Dynamic Content</h3>
<div id=”content”>Page 1 Content</div>
<nav>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#” data-page=”1″>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#” data-page=”2″>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#” data-page=”3″>3</a></li>
</ul>
</nav>
<script>
$(“.page-link”).click(function (e) {
e.preventDefault();
let page = $(this).data(“page”);
$(“#content”).text(“Page ” + page + ” Content”);
});
</script>
</body>
</html>
Output:
In this example:
Clicking a page number changes the content dynamically without reloading the page.
Conclusion:
🔹 Bootstrap Pagination helps break large content into small, navigable sections.
🔹 You can style pagination (alignment, colors, icons, disabled buttons, etc.).
🔹 Dynamic pagination makes it interactive without reloading the page.
Practice Scenario
Scenario:
You are making a blog with 5 pages. The first page is active by default, and the “Previous” button should be disabled on the first page. The “Next” button should be disabled on the last page.
Expected Output:
YouTube Reference :
Form Validation to Bootstrap in Hindi/Urdu
Bootstrap pagination is a navigation system in web development that allows users to browse through a list of content, such as search results or blog pages, one page at a time.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Use the Bootstrap .pagination class along with utility classes like .pagination-lg or .pagination-sm to create responsive pagination.
Yes, we offer Bootstrap Pagination tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include basic pagination, pagination with disabled states, and pagination with icons for better navigation.
Combine Bootstrap pagination classes with JavaScript or a server-side scripting language to create dynamic pagination that adjusts based on user input or database queries.
Static pagination shows predefined page numbers, whereas dynamic pagination updates the displayed pages based on user interaction or data fetched dynamically via JavaScript or backend logic.
Yes, you can customize Bootstrap pagination using custom CSS or Bootstrap utility classes to modify colors, sizes, and alignment.
Pagination icons are glyphicons or font icons (such as arrows) used in place of text for next/previous navigation buttons, often implemented with libraries like Font Awesome.
