Search code examples
coldfusionhtml-emailcoldfusion-9cfmail

Include bootstrap in cfmail

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

  • 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