Default Col min-width: 0 affects responsive behavior

[anthonylonergan]

After upgrading from Bootstrap 4.4 to 4.5 I noticed cards within columns which used to respond responsively when the screen size is made smaller, now become stacked (i.e. overlap).

It appears to be related to a CSS change in 4.5 where the col min-width defaults to 0. #30049

Effect can be viewed in this example by simply changing the CSS bootstrap setting between 4.4.1 (responsive) and 4.5 (stacked) https://codepen.io/alonergan/pen/BaoGqwO

OS: Win 10
Browser: Chrome Version 81.0.4044.138 (Official Build) (64-bit)

[alessandromarotta]

There is the same issue here: #30851, opened some hours ago

[madman-81]

I ran into a similar issue after updating to 4.5. What is a correct/best way to fix it? Or is this a bug in Bootstrap and will it be reverted?

[alessandromarotta]

@madman-81 you have to set

 .col{
   min-width: initial !important;
}

[madman-81]

Yes, I saw something similar on Stackoverflow (https://stackoverflow.com/a/61899064) and I've done that for now. But is it a workaround or solution?

[alessandromarotta]

It's a patch (solution): "initial" reset to browser initial value.

[OrangeDog]

This caused all the margins to collapse above the breakpoint and images to overlap in this sort of structure:

<div class="row no-gutters" id="row">
  <a class="col-lg"><img></a>
  <a class="col-lg"><img></a>
  <a class="col-lg"><img></a>
</div>

#row {
  align-items: center;
  margin-left: auto !important;
  text-align: right;
}
#row img {
  margin: 10px 0;
}

For a more complete fix, you need to patch all the classes:

.col, .col-sm, .col-md, .col-lg, .col-xl {
    min-width: initial !important;
}

[ffoodd]

I digged this a bit, and there're a few things to consider:

1. min-width: 0; on .col resolves a very uncommon use case (#30049 's codepen), which should be fixed with .col-6 classes (forked pen) instead of amending the main column class;
2. in the current issue's codepen, there's also something wrong: hardcoded, arbitrary width on cards. I know they're coming from the docs, but setting width on something contained in a grid is a bit odd. By removing those widths, you get the exact same result with both 4.4.1 (forked pen) and 4.5.0 (forked pen) — so this might not be a regression, after all.

To get this current codepen's result in 4.4.1, you should've use the .col classes too. This is the best way to control layout.

The current reduced test case should probably not be considered as a regression; however I presume there are other use cases where this min-width has side-effects, so I'd be in favor of simply dropping this.

@mdo @MartijnCuppens any thought?

[uvbeenzaned]

I have had major issues with the new min-width setting. I upgraded because I saw it was a minor and I didn't check my app as thoroughly as I would with a bigger update so unfortunately my app made it to production looking like hot garbage on smaller size windows and devices. Hoping to push the min-width: initial !important patch out before customers notice how bad it is. I am in favor of removing this if many more people are having the same issues I am.

[mdo]

Let’s drop it @ffoodd

[NathanQ]

The .col class min-width: 0 now breaks the column's layout when contained in a .row.no-gutters div when preceded by col-x divs that fill the row's width. It used to lay underneath them. See codepen https://codepen.io/NathanQ/pen/rNxZwox

Thanks for looking!