back to course
Lesson 03 / 506%· free preview
Bootstrap 5 Basics3/32
BS5 Containers
Containers wrap page content and apply max-width + horizontal padding. Three flavors: .container, .container-fluid, .container-{breakpoint}.
The three container types
| Class | Behavior |
|---|---|
.container | Centered, fixed max-width that grows in steps at each breakpoint |
.container-fluid | Full-width, always 100% of viewport |
| `.container-{sm | md |
When to use which
.container— most pages. Looks right on phones, tablets, and 1920 px monitors..container-fluid— full-bleed dashboards, hero sections..container-md— pages that should be edge-to-edge on phones but locked on tablets/up.
Diagram
Real-life Example
GitHub's homepage uses .container for the marketing copy and .container-fluid for the dashboard once you log in — same site, two strategies.
Important. Wrap your content in
.container(or.container-fluid) — most Bootstrap components break visually if you skip it.
Key Takeaways
.container— fixed-width, centred, breakpoint-aware.container-fluid— always 100% width.container-{sm|md|lg|xl|xxl}— fluid until that breakpoint, fixed above
Interview Questions
Practice Questions
- Wrap a heading in
.container— observe centred fixed-width. - Switch to
.container-fluidand resize the window — note 100% width. - Use
.container-mdand resize through breakpoints — note when it locks.
Pro Tips
- Nest containers — outer
.containerfor the page, inner.container-fluidinside for full-bleed sections. - Combine with
.px-*utilities to fine-tune horizontal padding.
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// feedback.matters()
Did this lesson help you?