Why doesn't row-cols-n work for any value greater than 6?

Question

As far as I can see, the row-cols- classes don't work for anything greater than 6 ie row-cols-6 works but row-cols-7 has no effect.

This means that something like

<div class="row row-cols-md-6 row-cols-lg-8">

always shows 6 columns for anything greater than the md breakpoint because the row-cols-lg-8 class is ignored.

1. Is this right or am I doing something wrong?

2. If it is right is there a reason why it stops at 6?

Answer 1

Put all your columns inside Rows like this and see how it works....

<div class="row">
   <div class="col">
       <!-- Content for column 1 -->
   </div>
   <div class="col">
       <!-- Content for column 2 -->
   </div>
</div>

OK so now you can divide up the screen using those columns and any numbers from 1 to 12 where 12 is a whole screen width so the columns will be stacked on top of each other and using 6 is a half screen so the columns will take up half the page each.

col-1
col-2
col-3
col-4

Etc

After this you're just about viewport size. So you might want extra wide columns on small screens and thinner columns on medium and larger screens.

col-sm-12
col-md-6
col-lg-3

And your full thing then looks a bit like this...

<div class="row">
   <div class="col-sm-12 col-md-6 col-lg-3">
       <!-- Content for column 1 -->
   </div>
   <div class="col-sm-12 col-md-6 col-lg-3">
       <!-- Content for column 2 -->
   </div>
</div>