row > * css taking precedence instead of col-* css after upgrading to bootstrap 5 from 4.

[nainesh279]

After upgrading to bootstrap 5 from 4, I am facing an issue where col-* css is overridden by row > * css. Please check the screenshot attached.
Why is it over-ridding the css for col-md-4 and taking width 100%.
It was not the case with Bootstrap 4. What cna be the issue or solution for this?

[benabraham]

This is not Bootstrap problem. Bootstrap works.

Your CSS is changed from the default Bootstrap CSS and it changes specificity which makes it a different CSS.

Your case

1. .row[ngcontent--ng--c3120S72962] > *[ngcontent-ng-c3120372962]
   • Specificity: (0,3,0)
     • 1 class selector (.row)
     • 2 attribute selectors (2×[ngcontent--ng--c3120S72962])
2. .col-md-4[ngcontent--ng--c3120S72962]
   • Specificity: (0,2,0)
     • 1 class selector (.col-md-4)
     • 1 attribute selector ([ngcontent--ng--c3120S72962])

So

• Attribute selector has the same specificity as class selector.
• The first selector has higher specificity due to the additional attribute selector.
• It takes precedence when setting properties regardless of order.

Bootstrap

1. .row > *

   • Specificity: (0,1,0)
     • 1 class selector (.row)

2. .col-md-4

   • Specificity: (0,1,0)
     • 1 class selector (.col-md-4)

So

• These selectors have equal specificity
• The later selector in the stylesheet (.col-md-4) wins if both set the same property like width.

Solution

Do not change Bootstrap's CSS.