Containers and max-width

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Containers and max-width—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 Containers and max-width 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 Containers and max-width in your own words.

A .container centers content and applies responsive max-widths at each breakpoint. Use .container-fluid when edge-to-edge width is intentional (dashboards, hero bands).

Container variants

.container — responsive max-width per breakpoint
.container-sm through .container-xxl — fluid until the named breakpoint, then capped
.container-fluid — always 100% width with horizontal padding

Compare Tailwind’s container mx-auto—same idea, different naming. Your HTML structure should still use meaningful landmarks (main, header) inside containers.

Self-check

When would you pick container-fluid over container?
What does a container add besides max-width?

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

container vs container-fluid—when each?
How does max-width help readability?

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