Pagination

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

<div class="row justify-content-center align-items-md-end">
  <div class="col-md-3">
    <form action="sampleAction">
      <label class="visually-hidden" for="NumberItemsToShow">Show how many?</label>
      <select class="custom-select form-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 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="icon 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="icon fas fa-angle-double-right" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="col-md-3 text-center text-lg-right text-lg-end">
    <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>

Resources

• Bootstrap Pagination