Google Ad Slot: content-top

Bootstrap 5 Pagination

~1 min read · Bootstrap

On this page

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

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

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

Large Pagination:

Small Pagination:

Try it yourself

Pagination Alignment:

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

Centered Pagination:

Right-Aligned Pagination:

Example

Centered Pagination:

Right-Aligned Pagination:

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Pagination

Basic Pagination:

Disabled and Active States:

Pagination Sizing:

Large Pagination:

Small Pagination:

Large Pagination:

Small Pagination:

Pagination Alignment:

Centered Pagination:

Right-Aligned Pagination:

Centered Pagination:

Right-Aligned Pagination:

Cookie Consent & Privacy Preferences