Stacks

Stacks are shorthand flexbox helpers that make it faster to build layouts. .vstack creates a vertical (column) stack, .hstack creates a horizontal (row) stack. Both support gap utilities.

Vertical Stack (vstack)

Use .vstack to create a vertical layout. Items stack from top to bottom with full width by default.

First item
Second item
Third item
Show Code
<div class="vstack gap-3">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Horizontal Stack (hstack)

Use .hstack to align items horizontally. Great for toolbars, button groups, and inline form elements.

First
Second
Third
Show Code
<div class="hstack gap-3">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

Vertical Divider

Add a .vr element inside .hstack to create a vertical divider between items.

Item 1
Item 2
Item 3
Show Code
<div class="hstack gap-3">
  <div>Item 1</div>
  <div class="vr"></div>
  <div>Item 2</div>
  <div class="vr"></div>
  <div>Item 3</div>
</div>

Auto Spacer

Use .ms-auto to push items to the right inside an .hstack.

Left item
Pushed right
Right item
Show Code
<div class="hstack gap-2">
  <div>Left item</div>
  <div class="ms-auto">Pushed right</div>
  <div>Right item</div>
</div>

Practical: Button Toolbar

Build a common toolbar pattern using .hstack with a spacer and divider.

Show Code
<div class="hstack gap-2">
  <button class="btn btn-primary btn-sm">Save</button>
  <button class="btn btn-outline-primary btn-sm">Preview</button>
  <div class="vr"></div>
  <button class="btn btn-secondary btn-sm">Duplicate</button>
  <button class="btn btn-danger btn-sm ms-auto">Delete</button>
</div>

Practical: Inline Form

Quickly build an inline search field using .hstack.

Show Code
<div class="hstack gap-2">
  <input class="form-control" type="text" placeholder="Search...">
  <button class="btn btn-primary">Search</button>
  <button class="btn btn-outline-secondary">Reset</button>
</div>

Practical: Card List

Use .vstack to create a vertically stacked list of cards.

Mata Kuliah: Pemrograman Web
Kode: TI-301 · SKS: 3
Aktif
Mata Kuliah: Basis Data
Kode: TI-202 · SKS: 3
Aktif
Mata Kuliah: Jaringan Komputer
Kode: TI-305 · SKS: 2
Selesai
Show Code
<div class="vstack gap-3">
  <div class="card">
    <div class="card-body d-flex justify-content-between align-items-center">
      <div>
        <div class="fw-medium">Course Name</div>
        <div class="text-muted small">Code: XX-000 · Credits: 3</div>
      </div>
      <span class="badge bg-primary">Active</span>
    </div>
  </div>
  <!-- repeat for more cards -->
</div>