Pagination
Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
Example
Default Pagination
Features of this pagination include;
Switching number of items per page
Showing the number of items out of total available items
Page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.
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;
Switching number of items per page
Showing the number of items out of total available items
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;
Contains page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.
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.
Last updated