## 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>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize