Bootstrap - Bootstrap pagination

Bootstrap pagination is a component that allows you to break content into pages and navigate between them. It’s commonly used for tables, lists, blogs, or galleries. Bootstrap provides pre-styled pagination elements that are responsive, accessible, and customizable.

1. Basic Pagination Structure

Bootstrap uses an unordered list (<ul>) with the class .pagination. Each page item is a <li> with the class .page-item, and the clickable link inside is <a> with .page-link.

Example (Bootstrap 5):

<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>

Explanation:

.pagination → Styles the <ul> as a pagination container.
.page-item → Styles individual list items.
.page-link → Styles the clickable links.

2. Active and Disabled States

Active Page

Indicates the current page:

<li class="page-item active" aria-current="page">
  <a class="page-link" href="#">2</a>
</li>

Disabled Page

Disables a page link:

<li class="page-item disabled">
  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>

3. Pagination Sizes

Bootstrap supports small, default, and large pagination using size classes on <ul>:

<!-- Large Pagination -->
<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>

<!-- Default Pagination -->
<ul class="pagination">
  <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>

<!-- Small Pagination -->
<ul class="pagination pagination-sm">
  <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 of Pagination

You can align pagination using Bootstrap flex utilities:

<!-- Centered -->
<ul class="pagination justify-content-center">
  <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>

<!-- Right Aligned -->
<ul class="pagination justify-content-end">
  <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>

5. Pagination with Icons / Symbols

You can use “Previous” / “Next” text or symbols like « and »:

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

6. Bootstrap 3 vs 4/5 Differences

Feature	Bootstrap 3	Bootstrap 4 & 5
Base class	`.pagination`	`.pagination`
Active page	`.active`	`.active` + `aria-current="page"`
Disabled page	`.disabled`	`.disabled` + `aria-disabled="true"`
Link class	`<a>` without `.page-link`	`.page-link` required
Sizing	`.pagination-lg` / `.pagination-sm`	Same in 4 & 5
Alignment	`.pagination-centered`	`.justify-content-center`
Responsive	Not fully responsive	Fully responsive

7. Full Example – Bootstrap 5 Pagination

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Pagination</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap 5 Pagination Example</h2>

  <!-- Basic Pagination -->
  <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"><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>

  <!-- Centered Pagination -->
  <ul class="pagination justify-content-center mt-3">
    <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>
  </ul>

  <!-- Small Pagination -->
  <ul class="pagination pagination-sm mt-3">
    <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>
  </ul>

  <!-- Large Pagination -->
  <ul class="pagination pagination-lg mt-3">
    <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>
  </ul>

</body>
</html>