Pager

Default pager

<div class="container">
<div class="row">
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
    <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
    <ul class="pagination justify-content-center pager__items align-items-center js-pager__items flex-wrap">
                                            <li class="page-item  active">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=0" title="Current page">
            <span class="visually-hidden">
              Current page
            </span>1</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=1" title="Go to page 2">
            <span class="visually-hidden">
              Page
            </span>2</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=2" title="Go to page 3">
            <span class="visually-hidden">
              Page
            </span>3</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=3" title="Go to page 4">
            <span class="visually-hidden">
              Page
            </span>4</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=4" title="Go to page 5">
            <span class="visually-hidden">
              Page
            </span>5</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=5" title="Go to page 6">
            <span class="visually-hidden">
              Page
            </span>6</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=6" title="Go to page 7">
            <span class="visually-hidden">
              Page
            </span>7</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=7" title="Go to page 8">
            <span class="visually-hidden">
              Page
            </span>8</a>
        </li>
              <li class="page-item ">
                                          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=8" title="Go to page 9">
            <span class="visually-hidden">
              Page
            </span>9</a>
        </li>
                          <li class="page-item pager__item--ellipsis px-100" role="presentation">…</li>
                          <li class="page-item pager__item--next">
          <a class="page-link" href="?field_procurement_open_date_value=&amp;field_procurement_close_date_value=&amp;term_node_tid_depth=All&amp;page=1" title="Go to next page" rel="next">
            <span class="visually-hidden">Next page</span>
            <span aria-hidden="true">Next ›</span>
          </a>
        </li>
          </ul>
  </nav>
</div>
</div>