Bootstrap Stack Patterns

Vertical Stacks (vstack)

Use .vstack to create vertical layouts. Combines display: flex, flex-direction: column, and align-items: stretch.

Basic Vertical Stack

Item 1
Item 2
Item 3

Vertical Stack with Auto Margin Spacer

Use .mt-auto to push items to the bottom of the container.

Top Item
Pushed to Bottom

Button Stack (Full-Width Buttons)

Use .vstack with column sizing for centered button groups.

Multiple Items with Spacers

Header
Content Area
Footer

Horizontal Stacks (hstack)

Use .hstack for horizontal layouts. Combines display: flex, flex-direction: row, and align-items: center.

Basic Horizontal Stack

Item 1
Item 2
Item 3

Horizontal Stack with Auto Margin Spacer

Use .ms-auto to push items to the right.

Left
Right

Horizontal Stack with Vertical Rule

Use .vr to create a vertical divider between items.

First
Second
Third

Inline Form with Horizontal Stack

Combine .hstack with form controls for inline layouts.

Navigation Bar Pattern

Use .hstack with auto margins for navbar-like layouts.

Brand

Gap Size Variations

Gap utilities range from .gap-0 (no gap) to .gap-5 (3rem). These work with both .vstack and .hstack.

.gap-0 (No Gap)

A
B
C

.gap-1 (0.25rem)

A
B
C

.gap-2 (0.5rem)

A
B
C

.gap-3 (1rem) - Default

A
B
C

.gap-4 (1.5rem)

A
B
C

.gap-5 (3rem)

A
B
C

Combined Patterns

Nest stacks for complex layouts. Combine .vstack and .hstack for flexible, responsive designs.

Card Layout with Nested Stacks

AB
Alice Brown Software Engineer
Active

This is a sample card demonstrating nested stack layouts for user profiles.

Comment Thread Pattern

JD
John Doe 2 hours ago

This is a great example of using stacks for comment layouts!

JS
Jane Smith 1 hour ago

Agreed! The nested stacks make this so clean.

Toolbar Pattern

Responsive Stack Patterns

Use responsive flex utilities to change stack direction at different breakpoints. Note: .vstack and .hstack don't have responsive variants. Use .d-flex with .flex-column / .flex-row instead.

Responsive: Column on Mobile, Row on Desktop

Use .d-flex .flex-column .flex-md-row for responsive layouts.

Stacks vertically on mobile
Becomes horizontal on md+
Third item

Responsive Gap Sizes

Combine responsive gap utilities: .gap-2 .gap-md-4.

Small gap on mobile
Larger gap on md+