Bootstrap's Pagination component lacks intelligent, responsive behaviors inherent in the Grid system. Therefore, the behavior you are describing is expected.
The challenge arises in how to tackle this limitation. Scaling down the buttons, as you propose, may seem like a good idea initially; however, when dealing with a high number of pages – say 100 pages – fitting all buttons on a single line would result in excessively small buttons.
Bootstrap's Pagination component offers a couple of built-in approaches to address this issue:
- Show a set number of page numbers along with
Prev and Next buttons.
- The above approach, but include a
... spacer to indicate additional pages.
Alternatively, you can modify the behavior of the Pagination component itself using a simple wrapper class: .table-responsive
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav aria-label="Page navigation example" class="table-responsive mb-2">
<ul class="pagination mb-0">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">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="#">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>
[...]
The .table-responsive class, typically used for tables to enable horizontal scrolling beyond screen width, also proves useful for accommodating various pagination options effectively within Bootstrap.
However, it must be acknowledged that this setup results in poor user experience. This explains why many pagination patterns align with the aforementioned bullet points.