Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

Stacks on Bootstrap

Vertical

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

<div class="vstack gap-3">
  <div class="border border-translucent bg-body-secondary px-3">First item</div>
  <div class="border border-translucent bg-body-secondary px-3">Second item</div>
  <div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>
First item
Second item
Third item

Horizontal

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

<div class="hstack gap-3">
  <div class="border border-translucent bg-body-secondary px-3">First item</div>
  <div class="border border-translucent bg-body-secondary px-3">Second item</div>
  <div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>
First item
Second item
Third item

Margin utilities

Using horizontal margin utilities like .ms-auto as spacers:

<div class="hstack gap-3">
  <div class="border border-translucent bg-body-secondary px-3">First item</div>
  <div class="border border-translucent bg-body-secondary px-3 ms-auto">Second item</div>
  <div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>
First item
Second item
Third item

Vertical rules

allowing you to create vertical dividers in common layouts

<div class="hstack gap-3">
  <div class="border border-translucent bg-body-secondary px-3">First item</div>
  <div class="border border-translucent bg-body-secondary px-3 ms-auto">Second item</div>
  <div class="vr bg-body-secondary"></div>
  <div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>
First item
Second item
Third item

Stack buttons

Use .vstack to stack buttons and other elements:

<div class="vstack gap-2 col-md-5 mx-auto">
  <button class="btn btn-secondary" type="button">Save changes</button>
  <button class="btn btn-outline-secondary" type="button">Cancel</button>
</div>

Inline form

Create an inline form with .hstack:

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here..." />
  <button class="btn btn-secondary" type="button">Submit</button>
  <div class="vr bg-body-secondary"></div>
  <button class="btn btn-outline-danger" type="button">Reset</button>
</div>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.15.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize