Spacing utilities

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 Spacing utilities—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 Spacing utilities 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 Spacing utilities in your own words.

Margin and padding helpers follow a predictable scale: m-*, p-*, with sides t/r/b/x/y and breakpoints md:mt-4 style via mt-md-4. Scale runs 0–5 plus auto for margins.

Reading the shorthand

mt-3 — margin-top at spacing step 3
px-4 — horizontal padding
mb-lg-0 — remove bottom margin from lg breakpoint up

Same mental model as Tailwind’s p-4 and mt-2, but Bootstrap uses 0–5 tied to $spacer rem values. Review CSS box model if margin collapse surprises you outside utilities.

Self-check

What is the difference between mx-auto and mt-auto?
Why prefer spacing utilities over inline styles for vertical rhythm?

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

When prefer m-* vs gap on flex?
Which spacing step feels too large?

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