Stacks

Overview #

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts using the following classes:

• .vstack — creates a vertical stack
• .hstack — creates a horizontal stack

Vertical #

You can use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-{size} utilities to add space between items.

<!-- Vertical stack -->
<div class="vstack gap-2">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

Horizontal #

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Please note, you can use horizontal margin utilities such as .ms-auto as spacers. Also, horizontal stacks work really well with vertical rules.

<!-- Horizontal stack -->
<div class="hstack gap-2">
  <div>First</div>
  <div>Second</div>
  <div class="vr ms-auto"></div>
  <div>Third</div>
</div>

Example #

Here's an example of a real-life UI/UX pattern: the ever ubiquitous to-do list.

<div class="card specific-w-300 mw-100 mx-auto">
  <div class="card-header"></div>
  <div class="card-body">
    <div class="hstack gap-2">
      <input class="form-control me-auto" type="text" placeholder="To-do item" aria-label="To-do item">
      <button type="button" class="btn btn-secondary">Submit</button>
      <div class="vr"></div>
      <button type="button" class="btn btn-danger" aria-label="Reset">
        <i class="fa-regular fa-trash-can"></i>
      </button>
    </div>
    <div class="vstack gap-1 border-top mt-3">
      <div class="d-flex align-items-center py-1 border-bottom">
        <button type="button" class="btn btn-secondary btn-sm me-2" aria-label="Set to complete" aria-describedby="item-1">
          <i class="fa-solid fa-check"></i>
        </button>
        <span id="item-1">Pick up groceries</span>
      </div>
      <div class="d-flex align-items-center py-1 border-bottom">
        <button type="button" class="btn btn-primary btn-sm me-2" aria-label="Reset" aria-describedby="item-2">
          <i class="fa-solid fa-check"></i>
        </button>
        <span id="item-2" class="text-decoration-line-through">Take a nap</span>
      </div>
    </div>
  </div>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).