Bootstrap 3: Emails defaulting to print media type even on screen

Question

I'm calling bootstrap 3's stylesheet like this in the header of my email:

<link href="/assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />

I noticed that links in my emails appear black and with no decoration and determined that they are using css that is only in bootstrap 3's @media print section, specifically color: #000 !important;.

Why is that?

How do I specify that my emails should be the screen media type and not print? (Unless of course someone decides to print it)

(Edit: I should specify that I'm using the Roadie gem to convert the styles to inline for emails: https://github.com/Mange/roadie)

Answer 1

You can't link to external style sheets in html email. You need to include it in the body. Even then for 100% compatibility, it must be inlined, as Gmail strips the <style> tag all together.

Also, bootstrap isn't designed for email so it will not render consistently across most email clients. You need to use tables instead.

If you want a framework for email, try Zurb's Ink.

Although considered "Patterns", I'd also recommend Cerberus by Ted Goas or Responsive Email Patterns by Brian Graves.

Answer 2

I figured this out in case anyone else has this specific problem.

Indeed the ruby gem Roadie does not work with media queries so it looks like when it was supposed to be turning css sheets into inline for email it was just grabbing all styles, not paying attention to media queries: https://github.com/Mange/roadie#my-media-queries-dont-work-how-can-i-fix-them