Bootstrap - Pagination: A Comprehensive Guide for Beginners

Hello there, aspiring web developers! Today, we're going to dive into the world of Bootstrap pagination. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Don't worry if you're new to coding – we'll start from the basics and work our way up. By the end of this tutorial, you'll be a pagination pro!

Bootstrap - Pagination

What is Pagination?

Before we jump into Bootstrap, let's understand what pagination is. Imagine you're reading a long book. Instead of cramming all the content onto one page, it's divided into manageable chunks – that's pagination in the digital world. It helps organize large amounts of content across multiple pages, making it easier for users to navigate.

Bootstrap Pagination: The Basics

Bootstrap, our trusty front-end toolkit, provides a simple and stylish way to create pagination. Let's start with the fundamentals.

Simple Pagination

To create a basic pagination in Bootstrap, we use the <nav> and <ul> elements with specific classes. Here's a simple example:

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

Let's break this down:

The <nav> element wraps our pagination for semantic purposes.
The <ul> has the class pagination, which applies Bootstrap's pagination styles.
Each <li> represents a page and has the class page-item.
The <a> tags inside each <li> have the class page-link, which styles the clickable part.

Working with Icons

Want to make your pagination look even cooler? Let's add some icons! Bootstrap works great with icon libraries like Font Awesome. Here's how you can use icons in your pagination:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

In this example, we've used « and » to create left and right arrow icons. These are HTML entities that render as « and » respectively.

Pagination States: Disabled and Active

Sometimes, you'll want to highlight the current page or disable certain navigation options. Bootstrap makes this easy with the active and disabled classes.

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

Here, the "Previous" link is disabled (you can't click it), and page 2 is marked as active (currently selected).

Sizing

Just like Goldilocks, sometimes you need your pagination to be just the right size. Bootstrap offers different sizing options:

<!-- Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>

<!-- Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>

Add pagination-lg for larger pagination or pagination-sm for smaller pagination. It's like choosing between a grande or tall at your favorite coffee shop!

Alignment

By default, pagination aligns to the left. But what if you want to center it or push it to the right? Bootstrap's got you covered:

<!-- Center alignment -->
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    <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"><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>

<!-- Right alignment -->
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-end">
    <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"><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>

Use justify-content-center to center your pagination, or justify-content-end to align it to the right.

Alignment Using a Flex Utility

For even more control over your pagination alignment, you can use Bootstrap's flex utilities:

<nav aria-label="Page navigation">
  <div class="d-flex justify-content-center">
    <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"><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>
  </div>
</nav>

Here, we've wrapped our pagination in a <div> with the classes d-flex and justify-content-center. This gives you more flexibility in positioning your pagination.

Conclusion

And there you have it, folks! You've just taken a grand tour of Bootstrap pagination. From basic structures to fancy alignments, you now have the tools to create beautiful, functional pagination for your web projects. Remember, practice makes perfect, so don't be afraid to experiment with these examples.

Here's a quick reference table of the classes we've covered:

Class	Purpose
pagination	Creates the basic pagination structure
page-item	Styles each item in the pagination
page-link	Styles the clickable part of each item
active	Highlights the current page
disabled	Disables a pagination item
pagination-lg	Creates larger pagination
pagination-sm	Creates smaller pagination
justify-content-center	Centers the pagination
justify-content-end	Aligns pagination to the right
d-flex	Creates a flex container

Happy coding, and may your pages always be perfectly paginated!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Offcanvas

Next Tutorial:

Bootstrap - Placeholders