1

I've been using bootstrap 4 on my angular 12 project for a while, and today I've upgraded to bootstrap 5. I know some properties have changed, but I've read that the grid system is identical.

I regularly use "Mix and Match" columns as written in the documentation, for example

<div class="container">
  <div class="row">
    <div class="col-12 col-sm"></div>
    <div class="col-12 col-sm-auto"></div>
    <div class="col-12 col-sm"></div>
  </div>
</div>

This example it's working very well with Bootstrap v4.* but not on v5.

It is supposed to have only 1 row where the first and third columns try to get all the available space and the second column fits your content.

What I saw on the Chrome DevTools that the col-12 class takes precedence over the col-sm class, even on larger screens.

Bootstrap Grid

Any ideas to try to solve this problem?

Joao Penas
  • 23
  • 6
  • This should be possible with bs5, I just don't get your exact requirement: So first and third col are always equal width (e,g like col-2) and middle column takes all of the rest space? – cloned Aug 03 '21 at 14:28
  • @cloned The middle column fits on your own content, and the first and third works as you said. This is what i want -> e,g.( 1ºCol = 45% 2ºCol = 10% 3ºCol = 45%) on "sm" breakpoint. – Joao Penas Aug 03 '21 at 14:51

1 Answers1

0

As I recently answered here, this is a bug that was introduced in 5.0.2 because the order of the column declarations was changed, making col-12 override col-sm on all breakpoints.

Until it's fixed, a workaround in your case would be to simply remove the col-12 (it's not needed since col-12 is the default)...

<div class="container">
  <div class="row">
    <div class="col-sm">col</div>
    <div class="col-sm-auto">col</div>
    <div class="col-sm">col</div>
  </div>
</div>

https://codeply.com/p/gUgPktyAyA

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Sorry, I couldn't find the post you mentioned. I can remove col-12 from my entire project and just use breakpoints (eg col-sm col-md-6 col-lg-12) because col-12 is the default or do you think they will solve this and will go back to the previous solution? – Joao Penas Aug 03 '21 at 15:31
  • Bootstrap 5.1 has been released: here's your old code working: https://codeply.com/p/n9aqzTWoGq – Carol Skelly Aug 04 '21 at 16:02
  • 1
    Fortunately, I rolled back to Bootstrap 4 expecting this fix. Good news, now I can update again ;) – Joao Penas Aug 05 '21 at 17:55