Pelican Design System
Pagination
Pagination
Pagination allows users to choose between viewable data sets.
On this page:
Best Practices
- Use Pagination if data, such as on Tables, is long and needs to be split up.
- Make sure the Pagination clearly shows the current page’s number.
- Pagination is placed at the bottom of the content which it pages.
- You may need to adjust columns sizes to best fit to your project.
Usage
Showing
X of Y
items.
<div class="row justify-content-center align-items-md-end">
<div class="col-md-3">
<form action="" class="">
<label class="sr-only" for="NumberItemsToShow">Show how many?</label>
<select class="custom-select mb-4 mb-lg-0" id="NumberItemsToShow">
<option selected>Show 10 per page</option>
<option value="1">Show 25 per page</option>
<option value="2">Show 50 per page</option>
<option value="3">Show All</option>
</select>
</form>
</div>
<div class="col-md-6">
<nav class="" aria-label="Page navigation example">
<ul class="pagination justify-content-center mb-lg-0">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span class="fas fa-angle-double-left" aria-hidden="true"></span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span class="fas fa-angle-double-right" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 text-center text-lg-right">
<p class="mb-2">Showing<br class="d-none d-md-block d-lg-none"> <strong>X</strong> of <strong>Y</strong>
items.</p>
</div>
</div>