Stack

Responsive
Similar to flexbox but built with tables.

Class Result
.stack-rowgenerate a horizontals stack
.stack-colgenerate a vertical stack
.stack-ax-lefttext-align: left;
.stack-ax-centertext-align: center;
.stack-ax-righttext-align: right;
.stack-ay-topvertical-align: top;
.stack-ay-middlevertical-align: middle;
.stack-ay-bottomvertical-align: bottom;
.stack-ay-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-row">
  <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-row 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-row 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-ax-left, stack-ax-center, and stack-ax-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-ay-top, stack-ay-middle, stack-ay-bottom, and stack-ay-baseline are for vertical alignment of child elements. By default everything defaults to top left alignment.

<div class="stack-row 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-row gap-4 stack-ay-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-row gap-4 stack-ay-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-row 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-row 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>
On this page