<div class="container-fluid pagination-container">
  <div class="row pagination-content">
    <div class="col-auto">
      <nav aria-label="Page navigation example">
        <ul class="pagination mb-0">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="First">
              <span aria-hidden="true">|&laquo;</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&lsaquo;</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">1 of 18</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&rsaquo;</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Last">
              <span aria-hidden="true">&raquo;|</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-auto">
      <div class="pagination-controls">
        <h6 class="items-label">Items per page</h6>
        <div class="dropdown">
          <button class="pagination-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i
              class="bi bi-chevron-down"></i></button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">1</a></li>
            <li><a class="dropdown-item" href="#">2</a></li>
            <li><a class="dropdown-item" href="#">3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>