Include bootstrap in cfmail

Question

The user receives an email when changes have been made to a form. I would like to display the information in a more readable format using twitter bootstrap. To my surprise the style text-info displays correctly but not the table styles. Is this a syntax error or does it have to do with the type of HTML rendering engine ColdFusion uses to create the email? I am using Outlook to view the emails.

Below I tried:

<cfmail from="test.com" to="me.com" subject="tester" type="html">
 <html>
  <head>
   <!---<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">--->
  </head>
   <body>
    <style type="text/css">

     <cfinclude template="/bootstrap/css/bootstrap.min.css">
    </style>

     <!--- Start comparing --->
    <p class="text-info">
      Has updated the following Project Information for Project
     </p>

     <table class="table table-striped" style="width: 600px">
    <tr>
     <th>Field</th>
     <th>Original</th>
     <th>Modified</th>
    </tr>

     <cfif compare(xOrig,xMod) IS NOT 0>
      <tr>
       <td>Field1</td>
       <td>#xOrig</td>
       <td>#xMod#</td>
      </tr>
     </cfif>

      </table>
     </body>
    </html>
</cfmail>

**ColdFusion doesn't render the HTML!** Emails are send plain-text and rendered by the client. Recent Outlook versions use Word for HTML rendering. (Previous versions used IE.) — Peter Boughton, Nov 10 '12 at 00:18

score 3 · Accepted Answer · answered Nov 10 '12 at 22:36

It is not best practice to include external stylesheets to render emails, in fact it won't even work for the vast majority of what you want to do as email clients ignore it or remove it.

To effectively render styled emails, you need to write your CSS inline, not even in the head of the email body. example:

<p style="color:#000;"></p>

Using inline styles will get you the best bang for your buck. Use the following resources at MailChimp as a guide: Mailchimp HTML Email Templates

score 2 · Answer 2 · answered Nov 10 '12 at 01:08

You should always put styles in your head tags, whether you're including the contents of the file or referencing the stylesheet by URL. While you may get away with putting them in the body, you might get inconsistent behavior between HTML rendering engines.

I'd personally use the link tag as you commented out. However, since the email isn't on your web server, you have to use an absolute reference, not a relative one:

<link href="http://www.mysite.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Include bootstrap in cfmail

2 Answers2