In an Angular project, I recently moved from bootstrap 4 to bootstrap 5 (v5.2.3, along with ng-bootstrap 14.2.0). Suddenly all of my layouts broke (all of the columns that were side by side suddenly appeared all vertical). I finally found the reason. In the Chrome inspector, I see that row > * (width of 100%) overrides individual column width.
I even removed all the code from a component and replaced it with something simple:
<div class="container"><div class="row"><div class="col-2">Column</div><div class="col-10">Column</div></div></div>Same thing - the row>* with it's 100% overrides col-2 and col-10 widths. (see below)
If I use the Chrome inspector to uncheck/remove the 100% from row>*, the layout looks perfect.
The odd thing is that when I create a standalone test.html page (same simple HTML above) outside of my project and include bootstrap via the CDN, the reverse is true. I see the columns overriding row and it displays correctly.
Any ideas?
Example: Screenshot of bootstrap 5 in my angular project, row>* width overriding column width of a column (col-2).
