Bootstrap Pagination
Bootstrap pagination is essential for creating user-friendly navigation when dealing with large datasets or multi-page content. In this tutorial, you’ll learn everything you need to know about creating and customizing Bootstrap pagination using Bootstrap 5.
Why Use Pagination?
Pagination improves the user experience by dividing content into manageable chunks. Instead of overloading users with information on one page, it allows for easy navigation and quick access to relevant data.
Basic Pagination
To create basic pagination, use the pagination class, page-item, and page-link classes. Here’s an
example:
<nav aria-label=”Page navigation”>
<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>
Output:
Adding Responsiveness
Bootstrap pagination is responsive by default, but you can customize it further using utility classes.
For example:
<nav aria-label=”Responsive pagination”>
<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=”#”>Next</a></li>
</ul>
</nav>
Output:
• Use justify-content-center for center alignment.
• Use justify-content-end for right alignment.
Pagination Examples
Here are some creative examples to inspire your design:
Example 1: Pagination with Disabled States
<nav aria-label=”Disabled state pagination”>
<ul class=”pagination”>
<li class=”page-item disabled”>
<a class=”page-link” href=”#” tabindex=”-1″ aria-disabled=”true”>Previous</a>
</li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item active” aria-current=”page”>
<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>
Output:
Example 2: Pagination with Icons
<nav aria-label=”Pagination with icons”>
<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>
Output:
Dynamic Pagination Using Bootstrap
Dynamic pagination allows you to load content dynamically without refreshing the page.
Here’s how you can create it with AJAX:
$(document).ready(function() {
$(“.page-link”).click(function(e) {
e.preventDefault();
let page = $(this).text();
$(“#content”). load(`data/page${page}.html`);
});
});
• Replace data/page${page}.html with your content source.
• Ensure you include jQuery or another library for smooth handling.
Best Practices for Pagination
1. Keep it Simple: Avoid overly complex designs that can confuse users.
2. Use Hover Effects: Highlight buttons on hover for better interactivity.
3. Accessible Design: Ensure your pagination is screen-reader friendly.
4. Dynamic Updates: Use AJAX or similar technologies for seamless page transitions.
Course Video
Reference Video
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.
