Bootstrap 4 Safari on Mac Grid issue

safari bootstrap-4 bootstrap-grid

Pau Mompó · Mar 21, 2018 · Viewed 21.2k times · Source

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

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.

Bootstrap 4 Safari on Mac Grid issue

Answer

Related questions