Google Ad Slot: content-top

Bootstrap 5 Pagination

Pagination in Bootstrap 5 is a navigation component that allows users to move between related content across multiple pages.

Basic Pagination:

The <ul> element with the pagination class. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>

Example

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

Try it yourself

Disabled and Active States:

To indicate the current page or disable navigation options. .active class is used to "highlight" the current page..disabled class is used for un-clickable links:

Example

<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>

</li>

</li>

</li>

</ul>

Try it yourself

Pagination Sizing:

You can use .pagination-lg or .pagination-sm to make the pagination larger or smaller:

Large Pagination:

Small Pagination:

Example

<h4>Large Pagination:</h4>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

<h4>Small Pagination:</h4>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

Try it yourself

Pagination Alignment:

To align pagination, use Bootstrap's flex utility classes:

Centered Pagination:

Right-Aligned Pagination:

Example

<h4>Centered Pagination:</h4>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

<h4>Right-Aligned Pagination:</h4>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

Try it yourself

Previous Next

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Pagination

Basic Pagination:

Disabled and Active States:

Pagination Sizing:

Large Pagination:

Small Pagination:

Pagination Alignment:

Centered Pagination:

Right-Aligned Pagination: