Stack
Responsive
| Class | Result |
|---|---|
| .stack-row | generate a horizontals stack |
| .stack-col | generate a vertical stack |
| .stack-ax-left | text-align: left; |
| .stack-ax-center | text-align: center; |
| .stack-ax-right | text-align: right; |
| .stack-ay-top | vertical-align: top; |
| .stack-ay-middle | vertical-align: middle; |
| .stack-ay-bottom | vertical-align: bottom; |
| .stack-ay-baseline | vertical-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>
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>