Stacks
Vertical
Item in stack
Item in stack
Item in stack
<div class="vstack">
<span class="bg-light border p-2">Item in stack</span>
<span class="bg-light border p-2">Item in stack</span>
<span class="bg-light border p-2">Item in stack</span>
</div><div class="vstack">
<span class="bg-light border p-2">Item in stack</span>
<span class="bg-light border p-2">Item in stack</span>
<span class="bg-light border p-2">Item in stack</span>
</div>
Horizontal
Item in stack
Item in stack
Item in stack
<div class="hstack">
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
</div><div class="hstack">
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
</div>
Spacers
Gap
Item in stack
Item in stack
Item in stack
Margin
Item in stack
Item in stack
Item in stack
<h4 class="h5 text-muted mt-3">Gap</h4>
<div class="hstack gap-2">
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
</div>
<h4 class="h5 text-muted mt-3">Margin</h4>
<div class="hstack">
<div class="bg-light border p-2 me-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2 ms-auto">Item in stack</div>
</div><h4 class="h5 text-muted mt-3">Gap</h4>
<div class="hstack gap-2">
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
</div>
<h4 class="h5 text-muted mt-3">Margin</h4>
<div class="hstack">
<div class="bg-light border p-2 me-2">Item in stack</div>
<div class="bg-light border p-2">Item in stack</div>
<div class="bg-light border p-2 ms-auto">Item in stack</div>
</div>