<div class="container my-4">

​

    <p class="font-weight-bold">An example of bootstrap pagination jquery. Easy to implement and customize. Examples of basic and advanced usage.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/components/pagination/"

          target="_blank">Pagination Docs</a> </p>

​

    <hr>

​

    <p class="font-weight-bold">Basic example</p>

    <nav aria-label="Page navigation example">

  <ul class="pagination pg-blue">

    <li class="page-item ">

      <a class="page-link" tabindex="-1">Previous</a>

    </li>

    <li class="page-item"><a class="page-link">1</a></li>

    <li class="page-item active">

      <a class="page-link">2 <span class="sr-only">(current)</span></a>

    </li>

    <li class="page-item"><a class="page-link">3</a></li>

    <li class="page-item ">

      <a class="page-link">Next</a>

    </li>

  </ul>

</nav>

    <hr>

    <nav aria-label="Page navigation example">

  <ul class="pagination pagination-circle pg-blue">

    <li class="page-item disabled"><a class="page-link">First</a></li>

    <li class="page-item disabled">

      <a class="page-link" aria-label="Previous">

        <span aria-hidden="true">&laquo;</span>

        <span class="sr-only">Previous</span>

      </a>

    </li>

    <li class="page-item active"><a class="page-link">1</a></li>

    <li class="page-item"><a class="page-link">2</a></li>

    <li class="page-item"><a class="page-link">3</a></li>

    <li class="page-item"><a class="page-link">4</a></li>

    <li class="page-item"><a class="page-link">5</a></li>

    <li class="page-item">

      <a class="page-link" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

        <span class="sr-only">Next</span>

      </a>

    </li>

    <li class="page-item"><a class="page-link">Last</a></li>

  </ul>

</nav>

​

  </div>