"Just another Web Dev blog"

Bootstrap 4 Grid System broken in Safari

Posted by Dillon | 19th March 2018

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.

For more helpful posts, check out our Web Development section.

Related Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

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