Responsive spacing and flex

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Responsive spacing and flex—the ideas, syntax, and habits you need before moving on in Bootstrap.

Traffic is predominantly mobile—layouts that only work on desktop fail users and metrics.

You will apply Responsive spacing and flex 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 Responsive spacing and flex in your own words.

Most utilities accept breakpoint infixes: mt-md-4, text-lg-center, flex-md-row. Read them as “from this breakpoint up, apply this utility.”

Composition example

A toolbar might use d-flex flex-column gap-2 flex-md-row justify-content-md-between—stacked buttons on phones, horizontal bar on tablets+. Spacing tweaks like py-3 py-lg-5 adjust vertical rhythm without custom CSS.

Tailwind puts the breakpoint first (md:flex-row); Bootstrap puts it after the property group (flex-md-row). Same idea, different word order.

Self-check

How do you add top margin 4 from md breakpoint upward?
What utility pair stacks flex items on mobile and rows them on md+?

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

d-md-none vs order utilities—when each?
Could screen readers be affected?

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