Has anyone gotten HTML emails working with Twitter Bootstrap?

Question

I'm using the premailer-rails3 gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.

https://github.com/fphilipe/premailer-rails3

It looks like some styles come in correctly, but not all of them. I'm wondering if anyone has a nice working example of getting their Twitter Bootstrap css (modified or not) into an html email.

Thanks!

Answer 1

If you mean "Can I use the stylistic presentation of Bootstrap in an email?" then you can, though I don't know anybody that has done it yet. You'll need to recode everything in tables though.

If you are after functionality, it depends on where your emails are viewed. If a significant proportion of your users are on Outlook, Gmail, Yahoo or Hotmail (and these typically add up to around 75% of email clients) then a lot of Bootstrap's goodness is not possible. Mac Mail, iOS Mail and Gmail on Android are much better at rendering CSS, so if you are targeting mostly mobile devices it's not quite so bad.

• JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
• Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
• font-face - you can only use external images. All other external resources (CSS files, fonts) are excluded.
• glyphs and sprites - because of Outlook 2007's weird implementation of background-images (VML), you cant use background-repeat or position.
• pseudo-selectors are not possible - e.g. :hover, :active states cannot be styled separately

There are loads of answers on SO, and lots of other links on the internet at large.

• http://www.email-standards.org/
• http://htmlemailboilerplate.com/
• http://www.campaignmonitor.com/css/

Answer 2

I apologize for resurecting this old thread, but I just wanted to let everyone know there is a very close Bootstrap like CSS framework specifically created for email styling, here is the link: http://zurb.com/ink/

Hope it helps someone.

Ninja edit: It has since been renamed to Foundation for Emails and the new link is: https://foundation.zurb.com/emails.html

Silent but deadly edit: New link https://get.foundation/emails.html