LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2514 min read

Pagination

Learn how to build Bootstrap pagination controls with active and disabled page states, sizing, and alignment options.

Introduction

Pagination controls let users navigate between pages of content, like search results or a blog archive. Bootstrap builds this on top of a semantic <nav> and an ordered list, with .page-item and .page-link classes handling the visual styling, active and disabled states, and sizing.

What You Will Learn
  • The nav/ul/li/a structure Bootstrap pagination expects.
  • Marking the current page active and disabling unavailable pages.
  • Adding previous/next arrows.
  • Sizing pagination larger or smaller.
  • Aligning pagination center or right.

Basic Pagination

Wrap an <ul class="pagination"> in a <nav aria-label="..."> for accessibility. Each page is an <li class="page-item"> containing an <a class="page-link">.

<nav aria-label="Search results pages">
  <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>
Result

Click Run to see what this code prints.

Active & Disabled States

Add .active to the <li> of the current page (with aria-current="page" on the link) and .disabled to an <li> that should not be clickable, such as an out-of-range "Previous" link on page one.

<nav aria-label="Search results pages">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

Previous/Next Icons

Replace the "Previous"/"Next" text with arrow glyphs while keeping a screen-reader-only label, using &laquo;/&raquo; entities or an icon and a .visually-hidden span.

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

Sizing

Add .pagination-lg or .pagination-sm to the <ul class="pagination"> element to scale every page link up or down.

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


<ul class="pagination pagination-sm">
  <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>
ClassEffect
pagination-lgLarger padding and font size
(default)Standard size
pagination-smSmaller padding and font size

Alignment

Pagination is a flex container, so standard flexbox utility classes control its alignment: .justify-content-center to center it, or .justify-content-end to push it to the right edge.

<nav aria-label="Centered pagination">
  <ul class="pagination 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>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Common Mistakes

Avoid These Mistakes
  • Forgetting to wrap pagination in <nav aria-label="..."> for accessible navigation landmarks.
  • Leaving real href="#" links on .disabled items without tabindex="-1" and aria-disabled="true", which lets keyboard users tab into a non-functional link.
  • Applying .active to more than one page item at once.
  • Using pagination for actions that are not really separate pages (use buttons or tabs instead).

Best Practices

  • Always give the wrapping <nav> a descriptive aria-label, e.g. "Blog post pages".
  • Show a reasonable number of page links (e.g. current page +/- 2) with ellipses for very long ranges rather than listing every page.
  • Keep Previous/Next controls at both ends so users don't have to hunt for adjacent pages.
  • Use pagination-sm inside compact UI like a table footer, and default or pagination-lg for primary page navigation.

Frequently Asked Questions

Bootstrap's default styling targets <a class="page-link">, but you can use <button class="page-link"> just as well if the action doesn't change the URL — the visual styling is identical.

Add a disabled <li class="page-item disabled"><a class="page-link" href="#">...</a></li> between the visible page numbers — Bootstrap has no special ellipsis component, so this is done manually.

It stays a single row and can overflow on narrow screens with many pages; for mobile, reduce the number of visible page links or wrap the <ul> in a scrollable container.

Key Takeaways

  • Pagination markup is <nav><ul class="pagination"><li class="page-item"><a class="page-link">.
  • .active marks the current page; .disabled marks an unavailable one.
  • .pagination-lg and .pagination-sm control overall size.
  • Flexbox utilities like .justify-content-center handle alignment.

Summary

Pagination gives you a fully accessible, easily styled way to let users move between pages of content using just a handful of classes on standard list markup. Next, you will add Bootstrap Icons to your project for scalable, easily styled iconography.

Next Lesson →

Bootstrap Icons