Bootstrap 4 Grid System broken in Safari

Are you having troubles with Bootstrap 4 Grid System in Safari? What used to work doesn’t seem to anymore within Safari. As the example below shows, this is how we usually create 3 columns within a row.

<div class="row">
   <div class="col-4">Column 4</div>
   <div class="col-4">Column 4</div>
   <div class="col-4">Column 4</div>
</div>

However, in Safari, instead of these being positioned side by side, they all fall into one column. This can be fixed easily with the CSS below.

/**
Fixing bootstrap columns for safari
 */
.row:before, .row:after{
 display: inline-block !important;
}

This overrides the standard Bootstrap styling for the row:before and :after.

Hopefully this helps, and the same doesn’t occur in Bootstrap 5.

For more helpful posts, check out our Web Development section and learn about Bootstrap 5.

BootstrapCSSSafari