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

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…

[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.

[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.