Bootstrap 4 Grid System broken in Safari

By Dillon Smart · · · 0 Comments

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.

BootstrapCSSSafari

0 Comment

Was this helpful? Leave a comment!

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

Top 3 CSS Frameworks in 2022

Updated 1st August 2022

Building and designing websites and web applications has become confusing. It can feel like every week there are new JavaScript frameworks to build your front-end applications and new packages to enhance the user experience. Thankfully, the same can’t be said for CSS. Here are the Top 3 CSS Frameworks by popularity, so you know they