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.

Dillon Smart

šŸ‘‹ Hey, I'm Dillon!

Iā€™m a Full-Stack developer in the UK, building websites and applications for around 12 years, landing my first full-time job as a developer in 2015.

Feel free to reach out on Twitter!

Comment

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

šŸ‘‹ Hey, Dillon here!

Every week I give a glimpse into my experiences as a Full Stack Developer.