Bootstrap Pagination

Simplifying Navigation with Bootstrap Pagination

When your website or app has lots of content spread across multiple pages—like blog posts, products, or search results—pagination helps users navigate efficiently. Bootstrap’s built-in Pagination component provides a clean, responsive, and customizable way to add page navigation to your project.

What Is Bootstrap Pagination?

Bootstrap Pagination is a set of styled page links that guide users through different pages of content. It supports simple numbered pages, previous/next buttons, and even disabled or active states, ensuring clarity and usability.

Basic Pagination Example

Here’s how you create a simple pagination bar:

• .pagination creates the pagination container.

• .page-item wraps each page number or control.

• .page-link styles the actual clickable link.

• .active highlights the current page.

• You can disable links using .disabled.

Disabled and Active States

Disable a page item (for example, the “Previous” button on the first page) by adding .disabled:

Sizing Pagination

You can adjust the size of pagination components with:

• .pagination-lg for large pagination

• .pagination-sm for small pagination

Example:

Alignment

Pagination can be aligned using Bootstrap’s flex utilities:

• Left (default)

• Center: add .justify-content-center to .pagination

• Right: add .justify-content-end to .pagination

Example:

Why Use Bootstrap Pagination?

• Improves user navigation on multi-page content

• Responsive and mobile-friendly by default

• Accessible with ARIA roles and attributes

• Easy to customize and integrate with your backend logic