bootstrap-grid

Inside "row row-cols-*", width determination for "col" when there's sibling "col-*"

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

I thought the above code would have the same result as

<div class="container">
  <div class="row row-cols-4">
    <div class="col-2">Column</div>
    <div class="col-2">Column</div>
    <div class="col-6">Column</div>
    <div class="col-2">Column</div>
  </div>
</div>

But in fact it has the same result as

<div class="container">
  <div class="row row-cols-4">
    <div class="col-3">Column</div>
    <div class="col-3">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

I don't understand why.

The documentation of .row-cols-* says

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.

So I thought:

  1. row-cols-4 means 1 row shoud have 4 <div class="col"> (or col-*).
  2. The third div has col-6 so its width would be 50% (6 out of 12) of the parent container.
  3. The other 3 <div class="col"> equally share the remaining 50% width.

But the truth is the 4th div wraps, leaving the first 3 divs in the first line, among which the first 2 each occupies 25% of the horizontal space.

Can somebody help me reason about this? Have I misunderstood the meaning of row-cols-4?

Solution

  • It's a common misconception.

    row-cols-* sets the columns on the row.

    So for example: row-cols-4 would mean the row should be divided into 4 columns, thus each column would implicitly be a col-3. Now, when you do a row-cols-4 and put col, col, col-6 and col inside it, you are giving the 3rd column (col-6) double of what is assigned to each column in the row. Now what you thought was this would distribute the remaining 6 columns into 3 and give 2 to each of the remaining. That isn't so. The other columns still get 3 column spaces. Because that is what we assigned as a minimum when we did row-cols-4. Anything extra will wrap, as it is doing.

    I hope this clears something up.