<nav>
      <ul class="pagination">
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-right"></i></a>
        </li>
      </ul>
    </nav>

    <nav>
      <ul class="pagination pagination-sm">
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-right"></i></a>
        </li>
      </ul>
    </nav>

    <nav>
      <ul class="pagination pagination-xs">
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
        <li class="page-item page-indicator">
          <a class="page-link" href="javascript:void(0)">
            <i class="la la-angle-right"></i></a>
        </li>
      </ul>
    </nav>
                    

                      <nav>
  <ul class="pagination pagination-gutter">
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-left"></i></a>
    </li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-right"></i></a>
    </li>
  </ul>
</nav>
<nav>
  <ul class="pagination pagination-sm pagination-gutter">
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-left"></i></a>
    </li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-right"></i></a>
    </li>
  </ul>
</nav>
<nav>
  <ul class="pagination pagination-xs pagination-gutter">
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-left"></i></a>
    </li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item page-indicator">
      <a class="page-link" href="javascript:void(0)">
        <i class="la la-angle-right"></i></a>
    </li>
  </ul>
</nav>
                    

                      <nav>
<ul class="pagination pagination-gutter pagination-primary no-bg">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item "><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-gutter pagination-danger">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-gutter pagination-info">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-gutter  pagination-warning">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
                    

                      <nav>
<ul class="pagination pagination-circle">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-circle">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-circle">
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-left"></i></a>
  </li>
  <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
  </li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
  <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
  <li class="page-item page-indicator">
    <a class="page-link" href="javascript:void(0)">
      <i class="la la-angle-right"></i></a>
  </li>
</ul>
</nav>