My bootstrap responsive row initially resizes correctly as the window width decreases, but then it suddenly jumps to a layout where each item is on its own line. I would prefer a more graceful transition where items are added one at a time when they no longer fit, rather than all at once.
Here is my current code:
<div class="row" id="myBtnContainer">
<div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
</div>
I have experimented with different sizes using sm, md, lg, and xl tags in the row, but none of them achieve the desired effect. The columns always end up on their own lines instead of transitioning gracefully.
Update:
After some additional attempts, I found that adding col-numbers to different size classes in the row makes the items fall inline one at a time, which is closer to what I want. However, this results in excessive spacing between buttons at wider views.
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5" id="myBtnContainer">
<div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
<div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
</div>