Skip to content

Pagination

This is a component directly linked to tables.

Every view has its own offset spacing defined. You can set it with Bootstrap's spacing utilities according to the position of the table in the UI and if there is more content below the pagination component.

Pagination

Viewing 10 out of 11 items
  • 1 (current)
  • 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
   <span class="ez-pagination__text">
       Viewing <strong>10</strong> out of <strong>11</strong> items
   </span>
</div>
<div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
    <ul class="pagination ez-pagination">
        <li class="page-item prev disabled"><span class="page-link">Back</span></li>
        <li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item next"><a class="page-link" href="#" rel="next">Next</a></li>
    </ul>
</div>

Note

Code example's background has been colored to show Pagination's full features.

Read the Docs