Stacks and vertical rhythm

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Stacks and vertical rhythm—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Stacks and vertical rhythm in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Stacks and vertical rhythm in your own words.

vstack and hstack (Bootstrap 5.1+) simplify one-dimensional layouts with built-in gap via gap-*. They replace many ad-hoc d-flex flex-column snippets for forms and button rows.

When to use stacks

vstack gap-3 — labeled form fields, card actions stacked vertically
hstack gap-2 — inline badges, avatar + name rows
Combine with responsive display: wrap an hstack in a column that goes full width on mobile

Similar to Tailwind’s flex flex-col gap-3, but Bootstrap names the pattern vstack so intent reads clearly in markup.

Self-check

What is the difference between vstack and hstack?
Which utility controls space between stack children?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

vstack vs row with g-*—when each?
What stacks poorly on mobile?

No discussion yet. Be the first to ask a question.