How to Create Bootstrap 5 Pagination?

You might have seen the pagination component on most of the blog index and archive pages. Generally the index pages show the latest ten articles and then use load more or numbered pagination for moving on to other pages. In Bootstrap 5, you just need to include a piece of code to display pagination in different styles. Note that Bootstrap is a frontend framework, it only offers inbuilt pagination component for mere display purpose. You should code yourself to add automated paginated links on index and archive pages.

If your site has fewer pages, it is easy to manually add each link on the pagination. But for a bigger site, say you have 500 blog posts, you should use appropriate script and theme setup to add automated links in pagination.

Bootstrap 5 Pagination Tutorial

This tutorial covers the following ways to create Bootstrap pagination:

1. Creating default Bootstrap pagination
2. Adding icons for previous and next navigation
3. Showing active and disabled links
4. Creating different sizes of pagination
5. Using different alignments

1. Default Bootstrap Pagination Component

The pagination component in Bootstrap is nothing but an unordered list of items like below:

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

• Basically you should use <nav> component for including pagination.
• Include unordered list with class “.pagination”.
• Each lit item should have “.page-item” class.
• Each link should use “.page-link” class.

The default pagination will look as shown below:

2. Adding Icons for Previous and Next

By default the pagination uses text for previous and next navigations. You can use icons instead by using the below code.

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

As icons can’t be read by visually impaired users, you should use previous / next text for the screen readers using “.sr-only” class. This will not be displayed on the browser. The component will look like below on the browser:

3. Showing Active Link and Disabling Link

You can show the active link on the pagination by adding “.active” class to the required list item. Similarly, add “.disabled” class to disable clicking on the particular link. In below example, the previous navigation text is disabled and link 2 is shown as active.

<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">Active Page</span></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>

The”.disabled” class uses default “pointer-events:none” CSS property. This will disable clicking with mouse but users still can use keyboard tab key to highlight the link and press space bar to open the linked page. The attribute tabindex =”-1″ is used to disable the link for keyboard access.

Below is how the active link will be shown on the pagination. The disabled links will show the stop cursor symbol when you move the mouse over.

4. Large and Small Size Paginations

Similar to most other Bootstrap 4 components, pagination can also be resized to bigger or smaller. The bigger one should contain “.pagination-lg” class with unordered list like below:

<nav aria-label="Pagination">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>

And right!!! The smaller on should contain “.pagination-sm” class:

<nav aria-label="Pagination">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>

Bigger and smaller pagination component will look like below:

5. Center and Right Aligned

Final variation is the alignment. By default the pagination component will be aligned on the left side. You can make it center or right using additional classes. For center alignment, add “.justify-content-center” to the unordered list.

<nav aria-label="Pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>

And for the right alignment, add “.justify-content-end” class to the unordered list.

<nav aria-label="Pagination">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>

---

---