Bootstrap 4 Pagination

Welcome to The Coding College! Pagination is a fundamental UI element used to divide content into manageable chunks, allowing users to navigate easily through pages. Bootstrap 4 makes it easy to implement Pagination with pre-designed classes and styles.

In this tutorial, you’ll learn how to create, customize, and enhance pagination using Bootstrap 4 to ensure your users have a seamless experience navigating your website.

What Is Pagination?

Pagination refers to the process of dividing large sets of data into smaller, more digestible chunks across multiple pages. It is often used in websites with a lot of content, such as blogs, e-commerce stores, or forums.

Bootstrap 4 simplifies pagination with the .pagination component, enabling developers to create responsive, user-friendly navigation.

Basic Pagination

To create a basic pagination component, use the .pagination class along with .page-item and .page-link.

Example:

<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>

Explanation:

  • <nav>: Provides accessibility features, such as screen reader support.
  • .pagination: Creates the pagination container.
  • .page-item: Wraps each page link.
  • .page-link: Styles the actual links.

Disabled and Active States

You can disable specific items or highlight the current page by adding the .disabled or .active classes to .page-item.

Example:

<nav aria-label="Page navigation example">  
  <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" 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>

Explanation:

  • .disabled: Disables a link, making it unclickable.
  • .active: Highlights the current page with a different style.

Pagination Sizes

Bootstrap 4 provides .pagination-lg and .pagination-sm classes to adjust the size of pagination components.

Example:

Large Pagination

<nav aria-label="Large pagination">  
  <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>

Small Pagination

<nav aria-label="Small pagination">  
  <ul class="pagination pagination-sm">  
    <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>

Alignment

Pagination can be aligned to the left, center, or right using utility classes like .justify-content-start, .justify-content-center, and .justify-content-end.

Example:

Center-Aligned Pagination

<nav aria-label="Center-aligned 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="#">2</a></li>  
    <li class="page-item"><a class="page-link" href="#">Next</a></li>  
  </ul>  
</nav>

Right-Aligned Pagination

<nav aria-label="Right-aligned pagination">  
  <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>

Custom Pagination

You can combine pagination with custom styles or icons for a unique look. For example, using Font Awesome icons instead of text:

Example:

<nav aria-label="Custom pagination">  
  <ul class="pagination justify-content-center">  
    <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>

Accessibility Tips

  • Use the aria-label attribute on the <nav> element to provide a description of the pagination component.
  • Add aria-current="page" to the active page link for better screen reader support.

Practical Example: Fully Functional Pagination

Here’s a complete example demonstrating various types of pagination:

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-primary">Bootstrap 4 Pagination</h1>  

    <!-- Basic Pagination -->  
    <h3>Basic Pagination</h3>  
    <nav aria-label="Basic pagination">  
      <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>  

    <!-- Pagination with Sizes -->  
    <h3 class="mt-4">Pagination Sizes</h3>  
    <nav aria-label="Large pagination">  
      <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>  

    <!-- Center-Aligned Pagination -->  
    <h3 class="mt-4">Center-Aligned Pagination</h3>  
    <nav aria-label="Center-aligned 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>  

  </div>  
</body>  
</html>

Conclusion

Bootstrap 4’s pagination component simplifies the process of creating clean, responsive, and accessible navigation. Whether you’re working on a blog, e-commerce site, or any data-heavy application, you can easily implement and customize pagination to suit your needs.

Leave a Comment