Lesson 1.3 — Containers & Breakpoints

Lesson overview
Containers control the max width of your content and align it nicely on the page. Bootstrap breakpoints let you apply different styles at different screen sizes, using classes like p-md-5 or text-lg-start.

Learning outcomes

• Use .container, .container-fluid, and responsive containers
• Understand breakpoint naming and behavior
• Apply responsive spacing and typography

Containers

• .container: centered layout with responsive max-width
• .container-fluid: full width at all sizes
• .container-{breakpoint}: fluid until a breakpoint, then fixed (e.g., .container-lg)

Breakpoints (how to think about them)

• sm = small screens and up
• md = medium and up
• lg = large and up
• xl, xxl = very large and up

Example: responsive container + padding

Responsive text alignment example

Practice tasks

• Build a page section that is container-fluid with a background color, but inside it place a centered .container for content.
• Add py-3 on mobile and py-5 on md and above.

Quick check

1. When would you use .container-fluid?
2. What does text-md-start mean exactly?

Lesson summary

• Containers set width; breakpoints let your layout adapt as the screen grows.