Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

## Default example

    <!-- Pagination: Basic example -->
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link">
            <i class="bx bx-chevron-left ms-n1 me-1"></i>
            Prev
          </a>
        </li>
        <li class="page-item disabled d-sm-none">
          <span class="page-link text-body">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
            <i class="bx bx-chevron-right me-n1 ms-1"></i>
          </a>
        </li>
      </ul>
    </nav>

## Prev / next icons only

    <!-- Pagination with prev / next icons only -->
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link">
            <i class="bx bx-chevron-left mx-n1"></i>
          </a>
        </li>
        <li class="page-item disabled d-sm-none">
          <span class="page-link text-body">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">
            <i class="bx bx-chevron-right mx-n1"></i>
          </a>
        </li>
      </ul>
    </nav>

## Sizing

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

    <!-- Regular size -->
    <nav aria-label="...">
      <ul class="pagination">
        ...
      </ul>
    </nav>

    <!-- Small size -->
    <nav aria-label="...">
      <ul class="pagination pagination-sm">
        ...
      </ul>
    </nav>

## Load more (One-page)

    <!-- Load more (One-page) pagination example -->
    <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 opacity-70 me-md-3">
          Showing 12 of 90 products
        </span>
        <div class="progress w-100 my-3 mx-auto mx-md-0" style="max-width: 12rem; height: 4px;">
          <div class="progress-bar" role="progressbar" style="width: 18%;" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <button type="button" class="btn btn-primary shadow-primary btn-sm ms-auto">
          <i class="bx bx-refresh fs-lg me-1"></i>
          Load more products
        </button>
      </div>
    </nav>

Top