Stacks

Shorthand flex layout helpers — .velin-stack-v for vertical stacks and .velin-stack-h for horizontal stacks with automatic gap spacing.

Vertical stack

First item

Second item

Third item

<div class="velin-stack-v">
  <div class="p-2 border rounded">First item</div>
  <div class="p-2 border rounded">Second item</div>
  <div class="p-2 border rounded">Third item</div>
</div>

Horizontal stack

Left

Center

Right (auto-margin)

<div class="velin-stack-h">
  <div class="p-2 border rounded">Left</div>
  <div class="p-2 border rounded">Center</div>
  <div class="p-2 border rounded ms-auto">Right</div>
</div>