Has Anyone Gotten HTML Emails Working with Twitter Bootstrap

Has anyone gotten HTML emails working with Twitter Bootstrap?

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/

Version of twitter bootstrap used in twitter-bootstrap-rails gem

Actually, you are not the only one with the doubt, docs say nothing about it.

The master branch uses v2.3.2, but there's also a bootstrap3 branch you can use.

Styling html in email

As far as the email client is concerned the HTML in an email begins with <body>. All styling must be done inline, unfortunately email clients don't behave the same way browsers do. There is some good information available here:



Related Topics



Leave a reply



Submit