Containers

Containers

Containers establish the horizontal content boundary used by many Bootstrap layouts and prevent very wide screens from producing unreadable text blocks.

Core concept

Explain .container, .container-fluid, and breakpoint-specific container widths. Describe the relationship between maximum width and the current viewport rather than presenting containers as fixed pixel boxes.

Using it in a real interface

Use a normal container for centered page content, a fluid container for full-width applications, and responsive container classes when a section should change its maximum width at a particular breakpoint.

Implementation notes

Do not put every small component in its own unrelated container. Establish page-level sections first, then use rows and columns inside the appropriate content boundary.