Create Responsive Flexible Bootstrap 4 Pagination - pagShrink.js

pagShrink.js is a tiny jQuery plugin that makes the Bootstrap 4 pagination component fully responsive by automatically shrinking page items on window resize.

How to use it:

1. Download and load the pagShrink.js script after jQuery & Bootstrap's JS.

<!-- Bootstrap Files -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/popper.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- pagShrink.js -->
<script src="/path/to/local/pagShrink.js"></script>

2. Create a Bootstrap pagination component for your long content.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <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="sr-only">(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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item"><a class="page-link" href="#">12</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

3. Just attach the function pagShrink to the pagination component and we're done.

$(function(){
  $('.pagination').pagShrink();
});

---

This awesome jQuery plugin is developed by gueff. For more Advanced Usages, please check the demo page or visit the official website.