Pagination

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Interactive demo

Example

Default Pagination

Features of this pagination include;

1. Switching number of items per page

2. Showing the number of items out of total available items

3. Page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.

4. Go to first page, last page, previous page and next page

Desktop

Mobile

<nav aria-label="Pagination">
      <div class="pagination-container">
        <div class="item_per_page d-none d-md-block"> <span>Show
          <select class="form-select">
            <option value="10">10</option>
            <option selected="" value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
          entries </span> </div>
        <div class="item_count d-none d-md-block">1-20 of 85 items</div>
        <ul class="pagination  pagination-number pagination-middle">
          <li class="pager-item"> <a class="page-link" href="#"> <i class="far fa-chevron-double-left"></i> <span class="sr-only">First</span> </a> </li>
          <li class="pager-item"> <a class="page-link" href="#"> <i class="fal fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> </li>
          <li class="pager-item d-none d-md-block"> <a class="page-link" href="#">1</a> </li>
          <li class="pager-item active d-none d-md-block"> <a class="page-link" href="#">2</a> </li>
          <li class="pager-item d-none d-md-block"> <a class="page-link" href="#">3</a> </li>
          <li class="pager-item  d-none d-md-block"> <a class="page-link" href="#">...</a> </li>
          <li class="pager-item  d-none d-md-block"> <a class="page-link" href="#">18</a> </li>
          <li class="mobile-pager d-md-none d-flex text-center align-items-center mx-2">Page 2 of 21</li>
          <li class="pager-item "> <a class="page-link" href="#"> <i class="fal fa-chevron-right"></i> <span class="sr-only">Next</span> </a> </li>
          <li class="pager-item"> <a class="page-link" href="#"> <i class="far fa-chevron-double-right"></i> <span class="sr-only">Last</span> </a> </li>
        </ul>
   </div>
</nav>

Page Jumper

Jump to a specific page by entering the page number without page numbered buttons. Features of this pagination include;

1. Switching number of items per page

2. Showing the number of items out of total available items

3. Jump to a specific page by entering the page number

Desktop

Mobile

<nav aria-label="Pagination">
      <div class="pagination-container py-3">
        <div class="item_per_page d-none d-md-block"> <span>Show
          <select class="form-select">
            <option value="10">10</option>
            <option selected="" value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
          entries </span> </div>
        <div class="item_count d-none d-md-block">1-20 of 85 items</div>
        <ul class="pagination py-0 mb-0">
          <li class="pager-item"> <a class="page-link" href="#"> <i class="far fa-chevron-double-left"></i> <span class="sr-only">Preivous</span> </a> </li>
          <li class="pager-item">
            <input type="number" class="form-control" value="1" aria-label="Jump to a page" aria-describedby="basic-addon2">
          </li>
          <li class="pager-item"> <a class="page-link" href="#"> <i class="far fa-chevron-double-right"></i> <span class="sr-only">Next</span> </a> </li>
          <span class="ms-2 mt-2">of 36</span>
        </ul>
      </div>
    </nav>

Simple Pagination

Features of this pagination include;

1. Contains page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.

2. Go to first page, last page, previous page and next page

Desktop

Mobile

<nav aria-label="Pagination">
      <div class="pagination-container">
        <ul class="pagination unboxed">
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#0" title="First" aria-label="First"> <i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-left"></i> First </a> </li>
          <li class="pager-item"> <a class="page-link" href="#0" title="Previous" aria-label="Previous"> <i class="fas fa-chevron-left"></i> Previous </a> </li>
          <li class="pager-item d-none d-md-block text-center page-link">1</li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#2" title="1" aria-label="2">2</a> </li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#2" title="3" aria-label="3">3</a> </li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#3" title="4" aria-label="4">4</a> </li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#4" title="5" aria-label="5">5</a> </li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#5" title="6" aria-label="6">6</a> </li>
          <li class="mobile-pager d-md-none d-block text-center">Page 2 of 21</li>
          <li class="pager-item d-none d-md-block text-center">...</li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#20" title="21" aria-label="21">21</a> </li>
          <li class="pager-item"> <a class="page-link" href="#2" title="Next" aria-label="Next">Next <i class="fas fa-chevron-right"></i> </a> </li>
          <li class="pager-item d-none d-md-block text-center"> <a class="page-link" href="#20" title="Last" aria-label="Last">Last <i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i> </a> </li>
        </ul>
      </div>
    </nav>

When to use

Pagination should be used for:

• Displaying large amounts of related content that spans across multiple pages. For example, search results or forum posts.

Pagination should not be used for:

• Indicating progress, such as in a transaction.

• Replacing Navigation.