Home/ Questions/Q 7992917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T13:42:25+00:00

I’m using the premailer-rails3 gem which pulls styles inline for html emails, and I’m

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0