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

css

Viewing posts tagged css

Bootstrap 4 Column Issue in Safari

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 for the longest time because I couldn’t figure out why it was happening. I did some digging and found 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 else. I figured I’d post it for anyone else going crazy trying to figure out this issue.

Target Microsoft Edge and IE with CSS

Let’s face it, for more than two decades, Internet Explorer has been the albatross of web browsing. Back in the day, it was pretty much all that was available to us. Now we have a number of different options which are all great. As of 2015, Microsoft scrapped IE and gave us a new browser called Edge, and though it’s better than IE, it still falls short in supporting some fairly common code.

That said, if you’re a developer, you’ll often be faced with the need to write “other” code for Edge and IE. Normally, you would do this with conditional comments such as:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->

But as of Internet Explorer 10, Microsoft has dropped support for conditional comments. Therefore, the next best way to target either of these browsers is with CSS. Below, you’ll find some simple code that’ll allow you to write CSS specifically for these browsers.

Microsoft Edge

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Internet Explorer 10+

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .selector {
        property: value;
    }
}

If you’re trying to target Internet Explorer 9 and lower, you can simply use conditional comments.

As of the posting of this blog, these pieces of code have been tested and work great. Just keep in mind this code could become deprecated over time. If you’re looking for more browser targeting or want something pretty interesting to read, check out Browser Strangeness by Jeff Clayton.