Cards overlap on older browsers, causing the site to be unusable

[yatahaze]

When cards are put into row, {col, card}(repeat) they all overlap on older browsers like IE 11 and older versions of iOS ~10 (I'm waiting for info on which iOS version my customer is having the issue with).

Here's the difference between Chrome (top) and IE11 (bottom) using Chrome 64.0.3282.119 and IE 11 on Windows 10. Bootstrap 4 (non-beta). You can see this code in action here in my simplified example.

This is a shortened version of the code. (It doesn't look as wrong as it does without pictures though).

<div class="row">
    <div class="col">
        <div class="card">
            test test test
        </div>
    </div>
    <div class="col">
        <div class="card">
            test test test
        </div>
    </div>
    <div class="col">
        <div class="card">
            test test test
        </div>
    </div>
    <div class="col">
        <div class="card">
            test test test
        </div>
    </div>
</div>

Live examples (screenshots were on beta 3):

• Screenshot on Chrome 64.0.3282.119, Win10 [working]

• Screenshot on IE 11, Win 10 [garbled]

• Screenshot on Old iPad [garbled]

• Live example (BS4) - However it is using a Bootswatch 4 theme. There is also some added CSS there for evening out card sizes.

I hate these old browsers, but I've just rolled out some sites that seem to attract people using old technology...

[karakunai]

I can confirm this from IE10 on my Lumia 730 (Windows Phone 8.1). Have you tried to use col-x to see of it fix the problem ?

Something like col-12 maybe.

[yatahaze]

col-12 works, but then it's only a single column per card. Anything less works a bit better but still overlaps some.

[karakunai]

Have you ever heard of col-sm-x, col-md-x, or something ?

[yatahaze]

Using those I can make the site work, but it's not 100% fixed. With "col-12 col-sm-6 col-md-6 col-lg-4" I get no overlap on both browsers, but I can only get 3 columns worth of products instead of the 4 I had before. (When I switch it to 4 I still get overlap on IE11.)

Maybe there's another fix I can use for this?

[karakunai]

Use the beta3 version, I haven't updated any of my site either. I am aware of any regressions that may happen, 4.1 or the next release should address this post-release bug.

[karakunai]

So, col-lg-3 and lower, could bring back that overlap issue ?

[karakunai]

This is strange, I didn't find any problem or overlap issue here with IE10. I am wondering if the image used on your example was the culprit. http://getbootstrap.com/docs/4.0/layout/grid/

[karakunai]

I mean open that link above with IE11, tell me of you find any overlap issue.

[yatahaze]

Everything in the link you posted seems to almost work. However, my issue stems from having more content in the cards than what those examples show.

In my screenshot, if those cards had a little more text or just an image, it would look similar to my previous examples. You can see at a very small window size the columns don't wrap down to new rows. Actually, I can squish it enough to make it look pretty close to my issue.

Thank you for the reminding me about the BS3/col-x stuff though. Can't believe I forgot to just try it that way, heh. My site currently works and I'm no longer in trouble. I just hope in a future update that the compatibility can be added for those old browsers. It looked nicer (in newer browsers) before this.

[karakunai]

Well done. I'm don't have any idea either about what has happened. How about applying .img-fluid to the image in the cards ?

[yatahaze]

Minor update: I forgot there was a "col-xl" size (derp). That makes it very close to the way the new "col" looked previously, it just can't do the sort of automated figure-each-card-size-out thing it was doing before, like when a new row popped up it would make a bigger card (which wasn't always the nicest looking either).

I'm using "col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3" for my product cards now and it's pretty good.

[bakedbird]

@yatahaze you don't really need col-md-6

[mariusa]

Another example of not working on screens/viewports at 570px or smaller, on modern browsers (Bootstrap 4.1.3, Chrome 68.0.3440).

example: https://booxia.com/book/20000-leagues-under-the-sea/m9u96ctuz2c

Cards overlap:

[mdo]

The original comment here doesn't strike me as a bug in Bootstrap, but in IE's flexbox implementation. Will need to do some research into https://github.com/philipwalton/flexbugs to see what's up.

[mdo]

Closing as stale—for the card columns, we know this is a disastrous implementation due to browser constraints. We've dropped it in v5 due to these problems and encouraged folks to use the grid. Same thing here applies to the original problem—it appears flex wrapping is not kicking in, and depending on the exact implementation, could be a flex bug or just a missed class.