Has anyone gotten HTML emails working with Twitter Bootstrap?

Solution 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/

Solution 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

Solution 3:

Here are a few things you cant do with email:

• Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
• Link to an external stylesheet. Not many email clients support this, best to just forget it.
• Background-image / Background-position. Gmail is also the culprit on this one.
• Clear your floats. Gmail again.
• Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
• Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

Source: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp has email templates you can use - here

A few more resources that should help you

• Best practices for styling HTML emails
• Styling html in email
• Styling HTML email for Gmail

Solution 4:

You can use this https://github.com/advancedrei/BootstrapForEmail for b-strapping your email.

Solution 5:

What about Bootstrap Email? This seems to really nice and compatible with bootstrap 4.