Referencing the documentation found here: https://getbootstrap.com/docs/4.1/utilities/flex/#fill
I am looking to have a flex element only fill on devices smaller than sm (matching my column breakpoint in the example).
Therefore, I thought of using something like .flex-fill .flex-sm-nofill
However, there is no such thing as flex-nofill!
It seems like I might be missing something obvious here, but how can I address this issue using just vanilla Bootstrap classes?
Although it wouldn't be difficult to create a new -nofill class, I was curious if there is already an existing solution that I may have overlooked.
In this particular scenario, I aim to have the buttons within following code example fill:
<div class="row justify-content-between p-3">
<div class="col-12 col-sm-8 col-xl-6 pb-2">
<select class="custom-select" id="layer_select">
<option data-dismiss="modal" value="0">Option1</option></select>
</div>
<div class="col-12 col-sm-3">
<div class="d-flex justify-content-between justify-content-sm-end">
<button class="btn btn-outline-secondary mr-2 flex-fill flex-sm-nofill"><i class="material-icons">file_download</i></button>
<button class="btn btn-outline-secondary flex-fill flex-sm-nofill"><i class="material-icons">filter_list</i></button>
</div>
</div>
</div>
Fiddle (Resize width to observe effect): https://jsfiddle.net/xpvt214o/155315/
The objective is to maintain fixed width for the buttons when they are positioned alongside the select element.