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

User · Answer

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

User · Answer

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

User · Answer

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   gt  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

User · Answer

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

User · Answer

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

User · Answer

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  lt html gt    lt head gt  lt  head gt    lt body gt     lt table align  quot center quot  class  quot container quot  gt       lt tbody gt         lt tr gt           lt td gt             lt table class  quot row quot  gt               lt tbody gt                 lt tr gt                   lt th class  quot small-12 large-12 columns first last quot  gt                     lt table gt                       lt tbody gt                         lt tr gt                           lt th gt Put content in me  lt  th gt                           lt th class  quot expander quot  gt  lt  th gt                         lt  tr gt                       lt  tbody gt                     lt  table gt                   lt  th gt                 lt  tr gt               lt  tbody gt             lt  table gt  amp zwj           lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  body gt    lt  html gt   Will produce this

User · Answer

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

User · Answer

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

User · Answer

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  lt head gt  section add     lt    stylesheet link tag  email    gt

User · Answer

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

[html] Has anyone gotten HTML emails working with Twitter Bootstrap?

Examples related to html

Examples related to twitter-bootstrap

Examples related to html-email