Bootstrap - Pagination: A Guide for Beginners

Hello there, aspiring web developers! Today, we're going to explore the world of Bootstrap pagination. As your friendly computer teacher, I'm thrilled to lead you on this journey. Don't fret if you're new to coding – we'll begin with the fundamentals and progress from there. By the end of this tutorial, you'll be a pagination expert!

What is Pagination?

Before diving into Bootstrap, let's grasp the concept of pagination. Imagine you're reading a lengthy book. Instead of fitting all the content on a single page, it's split into manageable sections – that's pagination in the digital realm. It helps to organize extensive content across numerous pages, making navigation easier for users.

Bootstrap Pagination: The Basics

Bootstrap, our reliable front-end toolkit, offers a straightforward and stylish approach to creating pagination. Let's start with the essentials.

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 encompasses our pagination for semantic purposes.
• The <ul> has the class pagination, which applies Bootstrap's pagination styles.
• Each <li> signifies a page and has the class page-item.
• The <a> tags within each <li> have the class page-link, which styles the clickable part.

Working with Icons

To make your pagination more appealing, let's add some icons! Bootstrap pairs well with icon libraries like Font Awesome. Here's how to incorporate icons into 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 display as « and » respectively.

Pagination States: Disabled and Active

Sometimes, you may want to highlight the current page or disable certain navigation options. Bootstrap simplifies this 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 (not clickable), 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 provides 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 has 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 that's it, folks! You've just gone on a comprehensive tour of Bootstrap pagination. From basic structures to sophisticated alignments, you now have the tools to create attractive and functional pagination for your web projects. Remember, practice makes perfect, so don't hesitate 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