Bootstrap Pagination

Pagination is a key feature in web design, used to break down large sets of data into smaller, more manageable chunks. Whether you’re displaying blog posts, search results, or product lists, Bootstrap Pagination offers a simple and responsive solution to create seamless navigation for your users.

In this guide from TheCodingCollege.com, you’ll learn how to implement and customize Bootstrap Pagination to improve your site’s usability and performance.

What Is Bootstrap Pagination?

Bootstrap Pagination provides a set of pre-styled classes to create navigation links for paginated content. It allows users to move between different pages of a dataset with ease.

Why Use Bootstrap Pagination?

  • Responsive Design: Adjusts to different screen sizes automatically.
  • Pre-Styled Elements: Saves time with built-in styles and functionality.
  • Customizable: Easily tweak styles and behavior to fit your design needs.

Basic Structure of Bootstrap Pagination

Bootstrap pagination is implemented using an unordered list (<ul>) with the pagination class, and each page link is represented as a list item (<li>).

Basic Syntax:

<nav>
    <ul class="pagination">
        <li><a href="#">Previous</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Output:

A simple pagination component with “Previous” and “Next” buttons along with numbered links.

Types of Pagination in Bootstrap

Bootstrap provides various styles for pagination that you can use based on your design requirements.

1. Default Pagination

The pagination class applies the default Bootstrap styling.

<nav>
    <ul class="pagination">
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Features:

  • The active class highlights the current page.
  • Default styling with clear and clean navigation.

2. Pagination with Disabled Links

The disabled class can be used to make a link inactive.

<nav>
    <ul class="pagination">
        <li class="disabled"><a href="#">Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Features:

  • Disabled links are grayed out and unclickable.

3. Pagination Sizes

Bootstrap allows you to adjust the size of the pagination component using pagination-lg for large and pagination-sm for small sizes.

Example – Large Pagination:
<nav>
    <ul class="pagination pagination-lg">
        <li><a href="#">Previous</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>
Example – Small Pagination:
<nav>
    <ul class="pagination pagination-sm">
        <li><a href="#">Previous</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Output:

  • Large pagination for increased visibility.
  • Small pagination for compact designs.

4. Pagination with Icons

Icons can enhance the usability of pagination, especially for mobile users.

<nav>
    <ul class="pagination">
        <li><a href="#" aria-label="Previous"><span>«</span></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#" aria-label="Next"><span>»</span></a></li>
    </ul>
</nav>

Features:

  • aria-label: Improves accessibility for screen readers.
  • &laquo; and &raquo;: Represent left and right arrows.

Customizing Pagination

While Bootstrap’s default pagination is clean and effective, you can customize it with CSS to fit your project’s unique design.

Example – Custom Colors and Borders:

<style>
    .custom-pagination .active a {
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
    }
    .custom-pagination a {
        color: #555;
    }
    .custom-pagination a:hover {
        background-color: #f0f0f0;
    }
</style>

<nav>
    <ul class="pagination custom-pagination">
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Output:

A pagination component with customized colors and hover effects.

Advanced Pagination Features

Dynamic Pagination with JavaScript

Bootstrap Pagination can be made interactive with JavaScript to load content dynamically without refreshing the page.

Example – Highlight Active Page Dynamically:
<script>
    const pages = document.querySelectorAll('.pagination li');
    pages.forEach(page => {
        page.addEventListener('click', function() {
            pages.forEach(p => p.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>

<nav>
    <ul class="pagination">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</nav>

Output:

Active pages are dynamically highlighted without a page reload.

Best Practices for Bootstrap Pagination

  1. Keep It Simple: Avoid overwhelming users with too many links.
  2. Use Ellipses for Large Data Sets: For paginations with hundreds of pages, use ellipses (...) to shorten the navigation.
  3. Ensure Accessibility: Add aria-label attributes for screen readers.
  4. Test for Responsiveness: Ensure pagination works well across devices.

Use Cases for Pagination

  • Blog Navigation: Break down articles into pages for better readability.
  • E-commerce Sites: Paginate product listings for quicker browsing.
  • Search Results: Provide numbered pages for long result lists.
  • Reports and Tables: Split large datasets into pages for better performance.

Conclusion

Bootstrap Pagination is an essential tool for improving user experience and navigation on your website. Whether you’re managing blog posts, search results, or data tables, Bootstrap’s pre-styled and customizable pagination system is a simple yet powerful solution.

Leave a Comment