My goal is to create a layout with 5 columns on extra large screens, 4 columns on large screens, and 2 columns on small/extra small screens. Currently, my code looks like this:
<div class="row mb-5">
{% for item in foobar %}
<div class="col-6 col-md-3 col-xl-2 py-2">
/* Content Here */
</div>
{% endfor %}
</div>
Although this code works for most screen sizes, I am encountering an issue on extra large screens where I want 5 columns but am getting 6 instead.
Since 12 (the total number of columns) is not divisible by 5, I'm struggling to figure out the best approach to achieve my desired layout.
To address this problem, I have attempted the following:
I experimented with adding row-cols-xl-5 to the row class based on suggestions from Stack Exchange answers, but this did not produce the desired result. Additionally, I tried using
<div class="col offset1-xl"></div>What is the easiest and most effective method to achieve the desired responsive layout?
While there is a similar issue discussed on Stack Exchange regarding 5 columns without specifying screen size, my requirement is to have 5 columns only on certain sized screens to ensure responsiveness.