These docs are for the prereleased 1.0.0.alpha2 version of Bootstrap Email - Give Feedback

Align

Align any content horizontally.

Class Result
.align-leftalign horizontally left
.align-rightalign horizontally right
.align-centeralign horizontally center

Usage

Align uses the align="left|center|right property on table to align anything horizontally. When it is used with a table or td it will put that property directly on them, however if it is used on any other tag it will wrap that element with a table and align it accordingly.

<div class="align-left">Align left on all viewport sizes</div><br>
<div class="align-right">Align right on all viewport sizes</div><br>
<div class="align-center">Align center on all viewport sizes</div>
<a class="btn btn-primary align-right" href="http://bootstrapemail.com">Right Aligned Button</a>
Align left on all viewport sizes


Align right on all viewport sizes


Align center on all viewport sizes

Right Aligned Button


Compiled Example

Input

<div class="align-left">Hello</div>
<div class="align-center">WOWWWWW</div>
<div class="align-right">Goodbye</div>

Output

<table class="align-left" role="presentation" align="left">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">Hello</div>
      </td>
    </tr>
  </tbody>
</table>

<table class="align-center" role="presentation" align="center" style="margin: 0 auto;">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">WOWWWWW</div>
      </td>
    </tr>
  </tbody>
</table>

<table class="align-right" role="presentation" align="right">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">Goodbye</div>
      </td>
    </tr>
  </tbody>
</table>