Bootstrap 4 Safari on Mac Grid issue

Question

There is an issue with Bootstrap 4 and Safari brower on Mac. When using cols inside a row it breaks it, and doesn't work like on firefox or chrome. I'm using a simple code like this:

<div class="row align-items-center">
    <div class="col-sm-12 col-md-3 hidden-xs align_left"><h3>TEXT</h3></div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
</div>

I'm trying different 'fix codes' from another questions but they doesn't solve the problem. Any clue?

Thanks in advance

Answer 1

Finally solved the problem with this simple CSS:

.row:before, .row:after {display: none !important;}

It seems there is some code hidden in :before and :after elements inside the rows. This causes some kind of issues in safari browsers.

Hope it helps.

Answer 2

.row:before, .row:after {width:0px; height:0px;}

There is a reason for display:table before and after row. By using display:none, the row will not preserve its height depending on the elements inside it, and row height is now 0px because the columns inside is floating..