Column CSS doesn't override row column default css when row-cols-[breakpoint]-[x] is used.

[lacutah]

OS: Windows 10
Browser: Chrome, Firefox, Edge latest
Version: 5 beta 3

Area: Grid
Apparent Problem: Column CSS doesn't override row column default css when row-cols-[breakpoint]-[x] is used.
My Expectation: Column specific classes should always override row class
Example: CodePen Example

The current order of CSS appears to be wrong:

.row-cols-[x]
.col-[x]
.row-cols-[breakpoint]-[x]
.col-[breakpoint]-[x]

I would expect it to be:

.row-cols-[x]
.row-cols-[breakpoint]-[x]
.col-[x]
.col-[breakpoint]-[x]

[mdo]

I don't think we designed them to do allow for that override—it was built as either or, not both. Unsure if we wanna take it this direction and allow that.

[lacutah]

The fifth example in the documentation shows it being used that way. And since the example doesn't use a breakpoint it works, so we're getting inconsistent behavior?

https://getbootstrap.com/docs/5.0/layout/grid/#row-columns

<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>

[mdo]

Oh shit, my bad. And I wrote the thing lol. Let's fix it!

[lacutah]

I did notice that the documentation doesn't explicitly say cols should overwrite the row "shortcuts" - but it seems the documentation should be made explicitly clear (and it follows order of specificity in my head!) if this is fixed.

In the existing documentation the closest I could find:
Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut.

My first bug here - but been (consuming) bootstrap for awhile - wasn't sure if this was a bug or if I wasn't understanding or if there was some other reason it wasn't working consistently.

[ffoodd]

There's at least some confusion in the docs, I agree.

The part you're quoting implicitly talks about specificity though: targetting the element itself (single class) or the parent (at least a class and a selector). The latter wins.

Needs to be made clearer in the docs, not sure either those should work together.

[lacutah]

I made a change in the order the cols and row-cols is compiled and submitted pull request #33621 along with a change to the row-cols documentation.

The pull request is admittedly opinionated and makes it official that row-cols isn't a(n inconsistent) shortcut, it's a default for columns in the row that can be overridden at the column level.

I'm a newbie at contributing scss changes, wasn't sure how to test besides npm run test and making sure the examples still worked as before. scss testing / node is something I don't touch unless something is broken...

[lacutah]

Not sure where you're all focused on, looks like this stalled out - I'm still happy to help out if more changes needed - see my comments in the proposed pull request.

[danielkauffman]

@lacutah Is this issue still fixed after #34341?

[lacutah]

@danielkauffman - it breaks, example here: https://codepen.io/Lacutah/pen/mdWNPyR