Email Templates

  • Ace admin template has an email converter which takes your HTML code in Bootstrap style and converts it to table layout appropriate for email clients.
  • For starters, there are a few samples provided that you can use and modify to make your own email templates:
    • build/demo/demo-confirmation.html
    • build/demo/demo-navbar.html
    • build/demo/demo-newsletter.html
    • build/demo/demo-contrast.html
    Inside email converter, when you select one of the above demo files, some of the options on left side are also modified.
  • You should consider the following for better results with converter.
  • Currently it only works best in Chrome browser as the conversion is done inside the browser and "getMatchedCSSRules" function is used which is only available in webkit browsers.
  • Use .row and .col-sm-* elements to have multiple columns inside a row which will be stacked on top of each other in small devices.
    If you add .sm-border class to .row, there will be a border separating stacked columns on small devices.
    You can also use a single .col class for less padding.
  • .row element can have .padding-* class for different content padding values.
    If you use this, the paddings will be fixed and won't be changed on smaller screens:
    Use .margin-* class on .row to specify spacing between its columns:
  • Use .clearfix and .pull-left or .pull-right classes to have a table with multiple rows and columns which won't be stacked on top of each other in small devices.
  • Use .navbar class for a navbar which has 100% width.
  • Use .space-*, .break-* and .hr-* classes for spacing or horizontal lines.
    For example .break-12 adds a 12px space with body background color and .space-12 adds a 12px space with content background color.
    For .hr-* you can also add the optional .padding-* to add padding from sides.
    If you have nested rows and columns, don't use above classes inside inner rows and columns.
  • For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color: <div class="space-12" style="background-color: #FF0000;"></div>
  • Add .pull-left, .pull-right class to img elements to make them automatically float to right or left on small devices.
  • You can use some classes to style your email. The following classes can be used:
    • Alerts, such as .alert-info, etc ...
    • Background classes such as .bg-primary, etc ...
    • Wells, such as .well, .well-sm
    • Text colors and styles such as .blue .red .text-info .bigger-110, etc ...
    • Button & label classes such as .btn-info, .btn-sm, .btn-white, .no-border, .label-success, etc ...
    • Alignment classes such as .text-right, .align-middle, etc ...
    • List classes such as .list-unstyled, .spaced, etc ...
    • And different classes or inline styles such as font-size, line-height, text-decoration list-style-type, etc ...