I'm doing a bootstrap-made project where I have one row with five children:
<div class="container"> <div class="row"> <div class="col">[content]</div> <div class="col">[content]</div> <div class="col">[content]</div> <div class="col">[content]</div> <div class="col">[content]</div> </div> </div>
(The content itself is a Bootstrap card, if that is of any concern)
So I've got some of the flexible layout classes going on on those col divs:
<div class="col col-12 col-md-6 col-lg-4 col-xl-3">[content]</div>
And that's fine at the smaller widths, it leads to wrapping, and I'm OK with that. But there comes a point where the screen is wide enough such that there's room for all five pieces of content. I just would like at that size for the content divs to act like they were just
class="col", so that they will share the one row and evenly divide up the space.
col-xl-auto and that doesn't seem to cut it: the cards just reduce to their "natural" sizes and they don't fill the row nicely.
I thought I understood the concept of bootstrap's
row-cols-* functionality, but I am getting awful results. I tried putting on the row
class="row row-cols-xl-5" and on each content div
col-xl-1 and that didn't work: the row just limits itself to the space that was previously occupied by the first five of 12 columns, and then the cards squeeze into there. I had expected that
row-cols-* took the same horizontal space that had before been divided into 12 columns and instead divided the same space into * columns, rather than just limiting the width of the row. Am I misunderstanding that?
Anyway, does anyone have an idea about what I'm trying to accomplish, that
col-xl-something will give me the standard
row g-1, and here is what I just tried for the cards:
col col-12 col-md-6 col-lg-4 col-xl. It seems like they have stuck at col-lg-4, and do not reorganize above that.