<div class="container my-4">

  <p>

    <strong>Pagination is a component used to indicate the existence of a series of related content across multiple pages and enables navigation across them

      :</strong>

  </p>

​

  <p>

    Detailed documentation and more examples you can find in our

    <a

       href="https://mdbootstrap.com/docs/b4/jquery/components/pagination/"

       target="_blank"

       ><strong>Bootstrap Pagination Docs</strong></a

      >

  </p>

​

  <hr />

​

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

​

  <p>

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

  </p>

​

  <div class="border p-5  d-flex justify-content-center ">

    <!-- Copy this code to have a working example -->

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

      <ul class="pagination">

        <li class="page-item"><a class="page-link" href="#">Previous</a></li>

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

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

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

        <li class="page-item"><a class="page-link" href="#">Next</a></li>

      </ul>

    </nav>

    <!--/ Copy this code to have a working example -->

  </div>

​

  <p class="note note-warning my-3">

    <strong>Note:</strong> To see more examples and sourcecodes check 

    <a href="https://mdbootstrap.com/docs/standard/navigation/pagination/" target="_blank" >

      <strong>Bootstrap Pagination Docs</strong>

    </a>

  </p>

​

  <p class="font-weight-bold mt-3">Icons example</p>

​

  <p>

    Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

  </p>

​

  <!-- Copy this code to have a working example -->

  <section class="border p-4 d-flex justify-content-center mb-4">

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

      <ul class="pagination mb-0">

        <li class="page-item">

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

            <span aria-hidden="true">«</span>

          </a>

        </li>

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

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

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

        <li class="page-item">

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

            <span aria-hidden="true">»</span>

          </a>

        </li>

      </ul>

    </nav>

  </section>

  <!--/ Copy this code to have a working example -->

​

​

  <p class="font-weight-bold mt-3">Disabled and active states example</p>

​

  <p>

    Pagination links are customizable for different circumstances. Use <code>.disabled</code> for

    links that appear un-clickable and <code>.active</code> to indicate the current page.

  </p>

​

  <!-- Copy this code to have a working example -->

  <section class="border p-4 d-flex justify-content-center mb-4">

    <nav aria-label="...">

      <ul class="pagination mb-0">

        <li class="page-item disabled">

          <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>

        </li>

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

        <li class="page-item active" aria-current="page">

          <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>

        </li>

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

        <li class="page-item">

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

        </li>

      </ul>

    </nav>

  </section>

  <!--/ Copy this code to have a working example -->

​

​

​

</div>