Let's get started.
Bootstrap 4 Column Issue in Safari

Bootstrap 4 Column Issue in Safari

Loading Likes...
August 13, 2018

So if you know anything about me, you know I love Bootstrap. It’s clean and allows you to make some great looking sites, responsively. I know a lot of people will say Flexbox over Bootstrap but Bootstrap 4 added Flexbox support so there ya go. That’s why I was pretty excited when Bootstrap 4 came out at the beginning of this year.

That said, I’ve found an issue using Bootstrap 4 with Apple Safari. The columns don’t line up as they should. For example, let’s say you have a three column row using .col-md-4. That should give you three columns, right? Unfortunately, in Safari, it doesn’t. You end up with the third column wrapping to the next line. See the figure below:

This drove me crazy as I couldn’t figure out why it was happening. I did some digging and I think I figured out what the problem was but I can’t remember now to save my life. That’s not really important. What’s important is I have a solution to this pesky problem. A tiny bit of CSS. Just add the following CSS to your site and the issue is fixed.

.row:before, .row:after {
    display: none !important;

Now I know this probably isn’t the most elegant solution but it works and from what I’ve found, doesn’t negatively impact anything. You certainly don’t have to use it but I figured I’d post it for anyone going crazy trying to figure out this issue.

Tags: , , , , ,

Leave a comment
More Posts