Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

        
<nav aria-label="navigation" class="pagination-col">
  <span class="item-dropdown-col">
    View
    <div class="items-dropdown">
      <i class="icon-arrow-bottom"></i>
      <select>
        <option>16</option>
      </select>
    </div>
    <span class="view-text">Items Per Page</span>
  </span>
  <div class="pagination-holder m-auto">
    <!-- <ul class="table-count-list m-auto">
      <li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
      <li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
      <li><a href="javascript:void(0);"><span>2</span></a></li>
      <li><a href="javascript:void(0);"><span>3</span></a></li>
      <li><a href="javascript:void(0);"><span>4</span></a></li>
      <li><a href="javascript:void(0);"><span>5</span></a></li>
      <li><a href="javascript:void(0);"><span>6</span></a></li>
      <li class="ellipsis-style"><a href="javascript:void(0);"><i class="icon-three-dot"></i></a></li>
      <li><a href="javascript:void(0);"><span>12</span></a></li>
      <li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
    </ul> -->
  </div>
  <ul class="next-prev-page">
    <li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
    <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
    <li><span class="page-count">1 of 12</span></li>
    <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
    <li><a href="javascript:void(0);">Last<i class="icon-right-arrow-double ml-1"></i></a></li>
  </ul>
</nav>