Stacks

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

Vertical

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

First item

Second item

Third item

CODE

html

<div class="vstack gap-3">
  <div class="p-2 text-bg-success">First item</div>
  <div class="p-2 text-bg-success">Second item</div>
  <div class="p-2 text-bg-success">Third item</div>
</div>

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.

First item

Second item

Third item

CODE

html

<div class="hstack gap-3">
  <div class="p-2 text-bg-success">First item</div>
  <div class="p-2 text-bg-success">Second item</div>
  <div class="p-2 text-bg-success">Third item</div>
</div>

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

First item

Second item

Third item

CODE

html

<div class="hstack gap-3">
  <div class="p-2 text-bg-success">First item</div>
  <div class="p-2 ms-auto text-bg-success">Second item</div>
  <div class="p-2 text-bg-success">Third item</div>
</div>

And with vertical rules:

First item

Second item

Third item

CODE

html

<div class="hstack gap-3">
  <div class="p-2 text-bg-success">First item</div>
  <div class="p-2 ms-auto text-bg-success">Second item</div>
  <div class="vr"></div>
  <div class="p-2 text-bg-success">Third item</div>
</div>

Examples

Use .vstack to stack buttons and other elements:

CODE

html

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

Create an inline form with .hstack:

CODE

html

<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 type="button" class="btn btn-success">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-success">Reset</button>
</div>

CSS

scss/helpers/_stacks.scss

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS