Day 3 - Containers

Containers are the fundamental building blocks in Bootstrap for organizing layout.

1. What are Containers?

Containers are used to contain, pad, and align content within a given device or viewport. They are essential for creating responsive layouts.

💡 Key Concept: Containers set the maximum width of your content and center it on the page.

2. Container Types

.container

Centers content and sets a fixed width at each responsive breakpoint.

Full width on extra-small screens, fixed widths on larger screens.

.container-fluid

Creates a full-width container that spans 100% of the viewport on all device sizes.

Always 100% wide.

3. Container Breakpoints

This table shows the max-width of each container at different screen sizes:

Class	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

4. Live Demos

Resize your browser to see how each container behaves:

.container
Fixed width, centered

.container-fluid
Always 100% width

.container-lg
100% until LG (992px), then fixed

.container-xl
100% until XL (1200px), then fixed

✓ Best Practice: Use .container for most pages. Use .container-fluid for full-width layouts like dashboards or hero sections.

< Previous: Typography | Next: Grid Layout >