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

With icons

<!-- Pagination: With icons -->
<nav class="mb-4" aria-label="Page navigation example">
  <ul class="pagination mb-0">
    <li class="page-item">
      <a class="page-link" href="#">
        <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 class="page-link" href="#">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 class="page-link" href="#">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <i class="ci-arrow-right"></i>
      </a>
    </li>
  </ul>
</nav>

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>

Light skin

<!-- Pagination: Light skin -->
<nav class="mb-4" aria-label="Page navigation example">
  <ul class="pagination pagination-light mb-0">
    <li class="page-item">
      <a class="page-link" href="#">
        <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 class="page-link" href="#">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 class="page-link" href="#">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <i class="ci-arrow-right"></i>
      </a>
    </li>
  </ul>
</nav>

Load more (One-page)

<!-- Load more (One-page) -->
<button class="btn btn-lg btn-link load-more-btn p-0 text-decoration-none" type="button">
  <i class="ci-arrow-convert me-3"></i>
  Load more
</button>

Entry navigation

<!-- Entry navigation (only for 2 items) -->
<nav class="d-flex justify-content-between" aria-label="Entry navigation example">

  <!-- Entry navigation item left -->
  <a class="entry-nav image-scale me-3" href="#">
    <h3 class="h5 entry-nav-heading pb-sm-2">
      <i class="ci-arrow-left me-2"></i>
      Prev post
    </h3>
    <div class="d-flex">
      <div class="entry-nav-thumb image-inner rounded d-none d-sm-block">
        <img class="me-1" src="path-to-thumbnail" width="100" alt="Media">
      </div>
      <div class="ps-sm-3">
        <span class="fs-sm text-muted">
          <i class="ci-clock me-2"></i>
          March 12, 2020
        </span>
        <h6 class="nav-heading fs-md fw-bold mb-0 mt-1 text-capitalize">
          10 tips for a small business digital marketing strategy
        </h6>
      </div>
    </div>
  </a>

  <!-- Entry navigation item right -->
  <a class="entry-nav image-scale ms-3" href="#">
    <h3 class="h5 entry-nav-heading pb-sm-2 text-end">
      Next post
      <i class="ci-arrow-right ms-2"></i>
    </h3>
    <div class="d-flex justify-content-end">
      <div class="text-end pe-sm-3">
        <span class="fs-sm text-muted">
          <i class="ci-clock me-2"></i>
          April 9, 2020
        </span>
        <h6 class="nav-heading fs-md fw-bold mb-0 mt-1 text-capitalize">
          Why SEO Is All About Content Marketing?
        </h6>
      </div>
      <div class="entry-nav-thumb image-inner rounded d-none d-sm-block">
        <img class="ms-1" src="path-to-thumbnail" width="100" alt="Media">
      </div>
    </div>
  </a>
</nav>
Top