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 next door, I'm thrilled to lead you on this journey. Don't worry 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 what pagination is. Picture you're reading a lengthy book. Instead of packing all the content onto one page, it's split into manageable sections – that's pagination in the digital realm. It helps organize extensive content across several pages, making it more accessible for users to navigate.

Bootstrap Pagination: The Basics

Bootstrap, our reliable front-end toolkit, offers a straightforward and stylish method to create 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

If you want to make your pagination even cooler, let's add some icons! Bootstrap works seamlessly with icon libraries like Font Awesome. Here's how you can 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'll 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 (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 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 there you have it, folks! You've just taken a grand tour of Bootstrap pagination. From basic structures to sophisticated 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