Bootstrap Pagination: States, Layout, and Setup

Updated 6 November 2026 · Standard formula, shown below

Bootstrap pagination is a component for creating page navigation links with built-in styling for active and disabled states, plus flexible layout options. This article explains how to set up pagination links, manage their states, and control their layout using Bootstrap classes.

Background and Purpose

Pagination is a user interface pattern that breaks long lists of content into separate pages, reducing load time and improving readability. Bootstrap provides a pre-styled component that handles the visual design of these page links, so developers don’t have to write custom CSS. It was introduced in Bootstrap 3 and has been refined in later versions, with the current stable release being Bootstrap 5. The component uses a simple <nav> element containing an unordered list, with classes that control appearance and behavior.

Basic Setup

To create a basic pagination component, you wrap a <ul> with the class .pagination inside a <nav> element. Each page link is an <li> with a class of .page-item, and the link inside has .page-link. Here is a minimal example:

<nav>
  <ul class="pagination">
    <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>
  </ul>
</nav>

This renders as three clickable page numbers. The <nav> element provides semantic meaning for screen readers, and the aria-label attribute can be added to describe the navigation, such as aria-label="Page navigation".

States: Active and Disabled

Bootstrap provides two state classes for pagination items:

Active: Add .active to the <li> element to highlight the current page. The link inside will have a blue background and a lighter text color by default. You should also add aria-current="page" to the link for accessibility.
Disabled: Add .disabled to the <li> to make a link unclickable and visually muted. This is often used for the “Previous” button on the first page or the “Next” button on the last page. The link will not respond to clicks, but you may still want to remove the href attribute or use a <span> instead of an <a> to prevent navigation.

Example with an active page and a disabled previous button:

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

Note that the .disabled class only prevents clicks on the link if it has an href attribute. For a truly non-interactive element, you can replace the <a> with a <span> and keep the .page-link class.

Layout Options: Sizing and Alignment

Bootstrap offers two layout adjustments for pagination:

Sizing: Add .pagination-lg for larger links or .pagination-sm for smaller ones. These classes modify the padding and font size of the page links.
Alignment: By default, the pagination list is left-aligned. To center it, add .justify-content-center to the <ul>. To right-align, use .justify-content-end. These utility classes work because the pagination uses flexbox.

Example of a centered, small pagination:

<nav>
  <ul class="pagination pagination-sm justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

Common Mistakes and How to Avoid Them

Several issues frequently arise when working with Bootstrap pagination:

Forgetting the nav wrapper: The <nav> element is not strictly required for styling, but it is recommended for accessibility and semantic correctness. Without it, screen readers may not announce the navigation region.
Using .disabled without removing the href: If a disabled link still has href="#", clicking it will jump to the top of the page. Replace the <a> with a <span> or remove the href attribute to prevent this.
Not updating the active state dynamically: When users click a page, the .active class must be moved to the new current page. This is typically done with JavaScript, but if you are using a server-side template, ensure the class is applied based on the current page number.
Ignoring responsive behavior: On small screens, a long list of page numbers can overflow. Consider using a JavaScript plugin that truncates the list or shows only a few pages around the current one.

Comparison with Other Pagination Approaches

Bootstrap’s pagination is just one of many ways to handle page navigation. Alternatives include:

Custom CSS: Writing your own styles gives full control but requires more work and may not be consistent with other UI elements.
JavaScript libraries: Libraries like DataTables or List.js often include built-in pagination with features like sorting and filtering. These are more powerful but add dependencies.
Infinite scroll: Instead of pagination, some sites load more content automatically when the user scrolls down. This is common on social media but can hurt SEO and accessibility if not implemented carefully.

Bootstrap’s component is a good middle ground: it is lightweight, consistent, and easy to customize with utility classes.

Accessibility Considerations

Proper pagination should be usable by everyone, including those using screen readers. Key points:

Use aria-label on the <nav> to describe the navigation, e.g., aria-label="Page navigation".
Add aria-current="page" to the active link so screen readers announce it as the current page.
For disabled links, use aria-disabled="true" in addition to the .disabled class to convey the state to assistive technologies.
Ensure that the link text is descriptive. For example, “Page 3” is clearer than just “3”.

Frequently Asked Questions

How do I make the first page link active by default?

Add the .active class to the first <li> element and include aria-current="page" on the link. When the user clicks another page, you must update the classes via JavaScript or server-side logic to move the active state.

Can I use icons for previous and next buttons?

Yes, you can place an icon (such as a chevron from an icon library) inside the <a class="page-link"> instead of text. For example, <a class="page-link" href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a>.

Why is my pagination not centered?

You need to add .justify-content-center to the <ul class="pagination">. This utility class works because the pagination list is a flex container. If it still doesn’t center, check that you are using Bootstrap 4 or 5, as the class name is the same.

How do I show a limited number of pages, like 1 2 3 … 10?

Bootstrap does not include this logic out of the box. You need to implement it yourself, either with JavaScript or by generating the HTML server-side. A common pattern is to show the first page, the last page, and a few pages around the current one, with an ellipsis in between.

Does Bootstrap pagination work with screen readers?

Yes, if you use the recommended accessibility attributes like aria-label, aria-current, and aria-disabled. Without these, screen readers may not announce the purpose of the navigation or the current page state.

Can I change the color of the active page?

Yes, you can override the default Bootstrap styles with custom CSS. For example, .pagination .page-item.active .page-link { background-color: #28a745; border-color: #28a745; } will make the active page green. Alternatively, you can use Bootstrap’s theming variables if you are compiling Sass.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.