Container

Responsive
Give the email center aligned structure.

Class Result
.containercenter aligned, max width 600px, left and right padding
.container-fluidfull width, left and right padding

Usage

Using the container class is the most common default email structure recommended. It should be used to wrap your entire pages contents. It has a 600px max-width which is standard for broad email support. It will be responsive on mobile devices.

<div class="container">
  <!-- Content here -->
</div>

A container-fluid is unlike a container in that it doesn’t have it’s max-width set. It does however still have padding on the edges to give the content better spacing towards the edge of the email.

<div class="container-fluid">
  <!-- Content here -->
</div>

Compiled Example

Input

<div class="container">
  <!-- Content here -->
</div>

Output

<table class="container" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td align="center" style="line-height: 24px; font-size: 16px; margin: 0; padding: 0 16px;">
        <!--[if (gte mso 9)|(IE)]>
          <table align="center" role="presentation">
            <tbody>
              <tr>
                <td width="600">
        <![endif]-->
        <table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
          <tbody>
            <tr>
              <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
                <!-- Content here -->
              </td>
            </tr>
          </tbody>
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </tbody>
          </table>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>
On this page