Bootstrap 4 Grid System broken in Safari

by Dillon -

Bootstrap JS and CSS framework

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.

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.