When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display.
Below is a snippet of my code:
<div class="col-12 col-md-6 col-lg-3">
<h3 class="text-capitalize">Devices</h3>
<ul id="pager_device" class="pagination-sm mt-1 pagination"><li class="page-item first disabled"><a href="#" class="page-link">First</a></li><li class="page-item prev disabled"><a href="#" class="page-link">Previous</a></li><li class="page-item active"><a href="#" class="page-link">1</a></li><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item next"><a href="#" class="page-link">Next</a></li><li class="page-item last"><a href="#" class="page-link">Last</a></li></ul>
<div id="pager_content_device">
<div class="col-12 results item active">
<div class="pt-4 border-bottom">
<a class="page-url h4 text-primary" href="/config/device_details/460/118/">US-EDGE</a>
<p class="page-description mt-1 text-muted"> Location: US <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
</div>
</div>
<div class="col-12 results item">
<div class="pt-4 border-bottom">
<a class="page-url h4 text-primary" href="/config/device_details/5/1/">UK-EDGE</a>
<p class="page-description mt-1 text-muted"> Location: UK <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
</div>
</div>
</div>
</div>
Here are screenshots showcasing the issue on a phone and iPad resolution:
On a phone with a col width of 12, you can see it's causing problems https://i.sstatic.net/Rqhj6.png
When viewed on an iPad with multiple columns, the paginators overlap making it messy. https://i.sstatic.net/Z12eg.png