Questions & Answers

all,

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.

I tried 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 col action?