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!

Email clients are very very hard to style for. With all of the complex CSS from bootstrap i don't think it will work. You're better off stripping off what you can and using tables and inline styles to get to the style you want, or close. — Andres I Perez, Mar 16 '12 at 11:51
I have the same issue. I think what I'll end up doing is making the email, taking a screenshot of how the CSS makes it look without text, and then in the HTML using the screenshot image along with the text. It's a nasty solution, but it should get the job done. — gsgx, Apr 02 '12 at 06:08
@gsingh2011 Just remember that all Outlooks and gmail (and probably others) don't display images before user's permit. It means that many of your subscribers will see a placeholder instead of image as a first impression. — gshilin, Apr 14 '12 at 11:13
I have to co-sign the above. Emails are really specific,(in case you're unfamiliar) Try downloading a few free email templates and tweak the code. Try these links freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/ — frontsideup, Apr 16 '12 at 12:05
Totally agree with you Brian. I've been working on HTML emails for the last few days, and it's unnecessarily and extremely painful. I'm interested in starting a Bootstrap style equivalent for HTML emails; would you be interested in helping out? — NoizWaves, Jun 14 '12 at 13:56

Dan Blows · Accepted Answer · 2020-03-03T10:24:14.050

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.

adamj · Answer 2 · 2020-10-10T02:49:26.780

48

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

edited Oct 10 '20 at 02:49

answered May 04 '14 at 13:11

adamj

4,672
5
49
60

2

All links broken. – Houman Mar 04 '20 at 06:32

score 17 · Answer 3 · edited May 23 '17 at 12:17

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

1. You can sort of use styles - you shouldn't put it in the head, but you can include it in the body. 2. Backgrounds are fine - use background html attribute instead of CSS. Outlook 2007/2010 require their own ('VML') solution. 3. You can't use floats at all, let alone clear them. 4. Font-anything - Eudora is a minority client. Obviously, depends on your client (look at analytics), but `font-size` gives you greater flexibility at very little cost. — Dan Blows, May 23 '12 at 21:21

score 11 · Answer 4 · answered Aug 07 '13 at 14:27

11

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

answered Aug 07 '13 at 14:27

Viktor Matushevskyi

746
11
22

2

Thanks for this link. I was searching everywhere for something like this! It's a shame that it was developed on Bootstrap 2.x and no longer in production. – oldo.nicho Jan 09 '16 at 13:27

score 3 · Answer 5 · answered Apr 12 '19 at 07:32

3

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

answered Apr 12 '19 at 07:32

Linga

10,379
10
52
104

1

This is one of the best ways to go – Kavinda Jayakody Jun 02 '21 at 07:55

score 2 · Answer 6 · answered Apr 18 '12 at 08:31

2

I spent some time recently looking into building html email templates, the best solution I found was to use this http://htmlemailboilerplate.com/. I have since built 3 quite complex templates and they have worked well in the various email clients.

answered Apr 18 '12 at 08:31

MattyHarris

61
2

score 1 · Answer 7 · edited Jan 16 '15 at 04:09

Hi Brian Armstrong， visit this link.

This blog tells you how to integrate Rails with Bootstrap less (using premailer-rails).

If you're using bootstrap sass, you could do the same:

start by importing some Bootstrap sass files into email.css.scss

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';

and then in your view <head> section add <%= stylesheet_link_tag "email" %>

Ryan Walton · Answer 8 · 2014-10-29T22:02:02.577

The best approach I've come up with is to use Sass imports on a selected basis to pull in your bootstrap (or any other) styles into emails as might be needed.

First, create a new scss parent file something like email.scss for your email style. This could look like this:

    // Core variables and mixins
    @import "css/main/ezdia-variables";

    @import "css/bootstrap/mixins";
    @import "css/main/ezdia-mixins";

    // Import base classes
    @import "css/bootstrap/scaffolding";
    @import "css/bootstrap/type";
    @import "css/bootstrap/buttons";
    @import "css/bootstrap/alerts";

    // nest conflicting bootstrap styles
    .bootstrap-style {
        //use single quotes for nested imports
        @import 'css/bootstrap/normalize';
        @import 'css/bootstrap/tables';
    }

    @import "css/main/main";

    // Main email classes
    @import "css/email/zurb";
    @import "css/email/main";

Then in your email templates, only reference your compiled email.css file, which only contains the selected bootstrap styles referenced and nested properly in your email.scss.

For example, certain bootstrap styles will conflict with Zurb's responsive table style. To fix that, you can nest bootstrap's styles within a parent class or other selector in order to call bootstrap's table styles only when needed.

This way, you have the flexibility to pull in classes only when needed. You'll see that I use http://zurb.com/ which is a great responsive email library to use. See also http://zurb.com/ink/

Lastly, use a premailer like https://github.com/fphilipe/premailer-rails3 mentioned above to process the style into inline css, compiling inline styles to only what is used in that particular email template. For instance, for premailer, your ruby file could look something like this to compile an email into inline style.

    require 'rubygems' # optional for Ruby 1.9 or above.
    require 'premailer'

    premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)

    # Write the HTML output
    File.open("delivery_report.html", "w") do |fout|
      fout.puts premailer.to_inline_css
    end

    # Write the plain-text output
    File.open("output.txt", "w") do |fout|
      fout.puts premailer.to_plain_text
    end

    # Output any CSS warnings
    premailer.warnings.each do |w|
      puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
    end

Hope this helps! Been struggling to find a flexible email templating framework across Pardot, Salesforce, and our product's built-in auto-response and daily emails.

score 0 · Answer 9 · answered Nov 18 '14 at 06:12

The trick here is that you don't want to include the whole bootstrap. The issue is that email clients will ignore the media queries and process all the print styles which have a lot of !important statements.

Instead, you need to only include the specific parts of bootstrap that you need. My email.css.scss file looks like this:

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";

@import 'bootstrap/normalize';
@import 'bootstrap/tables';

score 0 · Answer 10 · answered Jan 16 '21 at 16:09

Emails require tables in order to work properly.

Inky (by foundation for emails) is a templating language that converts simple HTML tags into the complex table HTML required for emails.

Example

<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>Put content in me!</th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Will produce this:

Has anyone gotten HTML emails working with Twitter Bootstrap?

10 Answers10

Example

Linked