0
0
Bootsrapmarkup~5 mins

Pagination component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Pagination helps break long lists into smaller pages. It makes content easier to read and navigate.

When showing search results that have many items.
On a blog to split posts into pages.
In an online store to show products page by page.
When displaying user comments in chunks.
To improve page loading by not showing everything at once.
Syntax
Bootsrap
<nav aria-label="Page navigation example">
  <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>

Use <nav> with aria-label for accessibility.

Each page number is inside a <li> with class page-item, and links have class page-link.

Examples
This example shows the first page active and the Previous button disabled.
Bootsrap
<nav aria-label="Page navigation">
  <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 active" aria-current="page"><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>
This example uses pagination-lg for larger page buttons.
Bootsrap
<nav aria-label="Page navigation">
  <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>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
This example uses pagination-sm for smaller page buttons.
Bootsrap
<nav aria-label="Page navigation">
  <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>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
Sample Program

This page shows a simple Bootstrap pagination with the first page active and the Previous button disabled. It uses semantic HTML and accessibility attributes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Pagination Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-5">
    <h1>Pagination Component Demo</h1>
    <p>Use the pagination below to navigate pages.</p>
    <nav aria-label="Page navigation example">
      <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 active" aria-current="page">
          <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>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use aria-current="page" on the active page for screen readers.

Disable buttons like Previous or Next when they can't be used to avoid confusion.

Use Bootstrap's built-in classes for consistent styling and responsive design.

Summary

Pagination breaks content into pages for easier reading.

Bootstrap provides simple classes to create accessible pagination.

Use page-item and page-link classes inside a pagination list.