Cartzilla Buy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Basic example

<!-- Pagination: basic example -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">Prev</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">Next</a>
    </li>
  </ul>
</nav>
// Pagination: basic example
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a.page-link(href="#") Prev
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#") Next

With icons

<!-- Pagination: with icons -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <i class="ci-arrow-left"></i>
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <i class="ci-arrow-right"></i>
      </a>
    </li>
  </ul>
</nav>
// Pagination: with icons
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a.page-link(href="#" aria-label="Previous")
        i.ci-arrow-left
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.visually-hidden (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#" aria-label="Next")
        i.ci-arrow-right

Sizing

<!-- Large size -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <!-- Page links -->
  </ul>
</nav>

<!-- Normal size -->
<nav aria-label="...">
  <ul class="pagination">
    <!-- Page links -->
  </ul>
</nav>

<!-- Small size -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <!-- Page links -->
  </ul>
</nav>
// Large size
nav(aria-label="...")
  ul.pagination.pagination-lg
    //- Page links

// Normal size
nav(aria-label="...")
  ul.pagination
    //- Page links

// Small size
nav(aria-label="...")
  ul.pagination.pagination-sm
    //- Page links

Load more (One-page)

<!-- Load more (One-page) -->
<nav class="d-md-flex justify-content-between align-items-center text-center text-md-left" aria-label="...">
  <div class="d-md-flex align-items-center w-100">
    <span class="fs-sm text-muted me-md-3">
      Showing 12 of 90 products
    </span>
    <div class="progress w-100 my-3 mx-auto mx-md-0" style="max-width: 10rem; height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 18%;" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <button>
      Load more products
    </button type="button" class="btn btn-outline-primary btn-sm">
  </div>
</nav>
// Load more (One-page)
nav.d-md-flex.justify-content-between.align-items-center.text-center.text-md-left(aria-label="Page navigation")
  .d-md-flex.align-items-center.w-100
    span.fs-sm.text-muted.me-md-3 Showing 12 of 90 products
    .progress.w-100.my-3.mx-auto.mx-md-0(style="max-width: 10rem; height: 4px;")
      .progress-bar(role="progressbar", style="width: 18%;", aria-valuenow="18", aria-valuemin="0", aria-valuemax="100")
  button(type="button").btn.btn-outline-primary.btn-sm
    | Load more products

Entry navigation

<!-- Entry navigation -->
<nav class="entry-navigation" aria-label="Entry navigation example">
  <a href="#" class="entry-navigation-link">
    <i class="ci-arrow-left me-2"></i>
    <span class="d-none d-sm-inline">Prev post</span>
  </a>
  <a href="#" class="entry-navigation-link">
    <i class="ci-view-list me-2"></i>
    <span class="d-none d-sm-inline">All post</span>
  </a>
  <a href="#" class="entry-navigation-link">
    <span class="d-none d-sm-inline">Next post</span>
    <i class="ci-arrow-right ms-2"></i>
  </a>
</nav>
// Entry navigation
nav.entry-navigation(aria-label="Entry navigation example")
  a(href="#").entry-navigation-link
    i.ci-arrow-left.me-2
    span.d-none.d-sm-inline Prev post
  a(href="#").entry-navigation-link
    i.ci-view-list.me-2
    span.d-none.d-sm-inline All posts
  a(href="#").entry-navigation-link
    span.d-none.d-sm-inline Next post
    i.ci-arrow-right.ms-2
Top