These docs are for the prereleased 1.0.0.alpha3 version of Bootstrap Email - Give Feedback
Similar to flexbox but built with tables.

Class Result
.stack-xgenerate a horizontals stack
.stack-ygenerate a vertical stack
.stack-align-lefttext-align: left;
.stack-align-centertext-align: center;
.stack-align-righttext-align: right;
.stack-valign-topvertical-align: top;
.stack-valign-middlevertical-align: middle;
.stack-valign-bottomvertical-align: bottom;
.stack-valign-baselinevertical-align: baseline;

Usage

Stacks work similar to the way flexbox does to lay children elements out in a row or a column. To use a stack, all you need to do a wrap children elements in either a stack-x for row or a stack-y for a column.

<div class="stack-x">
  <div>Lay a group of things</div>
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <div>Out horizontally</div>
</div>
Lay a group of things
Out horizontally

Gap

Stacks are made really useful when combined with Gaps. Using a gap you can space a few icons out.

<div class="stack-x gap-4">
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
</div>
<div class="stack-x gap-16">
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
</div>

Alignment

Stacks use HTMl tables to generate their layouts, that means we can use the power of table cells to align their contents horizontally and vertically. The classes stack-align-left, stack-align-center, and stack-align-right center contents horizontally (Note: you must either you an inline or inline-block child element for this to work as expected). The classes stack-valign-top, stack-valign-middle, stack-valign-bottom, and stack-valign-baseline are for vertical alignment of child elements. By default everything defaults to top left alignment.

<div class="stack-x gap-4">
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-20" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
</div>
<div class="stack-x gap-4 stack-valign-bottom">
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-20" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
</div>
<div class="stack-x gap-4 stack-valign-middle">
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-20" src="https://bootstrapemail.com/some/image.jpg" />
  <img class="w-10" src="https://bootstrapemail.com/some/image.jpg" />
</div>

Compiled Example

Input

<div class="stack-x gap-10">
  <div>stack item 1</div>
  <div>stack item 2</div>
  <div>stack item 3</div>
  <div>stack item 4</div>
  <div>stack item 5</div>
  <div>stack item 6</div>
</div>

Output

<table class="stack-x gap-10" role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 40px; margin: 0;" align="left" valign="top">
        <div>stack item 1</div>
      </td>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 40px; margin: 0;" align="left" valign="top">
        <div>stack item 2</div>
      </td>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 40px; margin: 0;" align="left" valign="top">
        <div>stack item 3</div>
      </td>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 40px; margin: 0;" align="left" valign="top">
        <div>stack item 4</div>
      </td>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 40px; margin: 0;" align="left" valign="top">
        <div>stack item 5</div>
      </td>
      <td class="stack-cell" style="line-height: 24px; font-size: 16px; padding-right: 0; margin: 0;" align="left" valign="top">
        <div>stack item 6</div>
      </td>
    </tr>
  </tbody>
</table>