Bootstrap 4 Safari on Mac Grid issue

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.

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