Bootstrap - Pagination in BS

Pagination in Bootstrap is a component that helps divide content into multiple pages and provides navigation links like “Previous,” page numbers, and “Next.” Bootstrap makes it easy to style pagination with ready-made classes.

1. Basic Structure

Bootstrap pagination uses a <nav> element with a <ul class="pagination"> inside. Each page link is a <li class="page-item"> containing an <a class="page-link">.

Example:

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

2. Active and Disabled States

  • Active page: Use .active on li.page-item to highlight the current page.

  • Disabled page: Use .disabled to make a link unclickable.

Example:

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#">Previous</a>
  </li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active">
    <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>

3. Sizing

Bootstrap allows different sizes of pagination:

  • .pagination-lg → large pagination

  • .pagination-sm → small pagination

Example:

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

4. Alignment

You can align pagination using flex utilities:

<ul class="pagination justify-content-center">
  ...
</ul>

<ul class="pagination justify-content-end">
  ...
</ul>

5. Key Points

  • Always wrap in <nav> for accessibility (aria-label helps screen readers).

  • Combine with .disabled and .active for proper UX.

  • Works well with server-side pagination or JavaScript-based pagination.