Bootstrap 5 TutorialLesson 3Free preview

BS5 Containers

This lesson is part of Bootstrap · All levels

Summary

Containers are the main packaging element of Bootstrap that provide padding and focusing content according to a particular breakpoint. There are three types: .container with a fixed width per breakpoint, .container-fluid which is always the width of the viewport, and .container-{breakpoint} which is full width until the breakpoint is reached. The horizontal container padding is made parallel to the column so that the content is aligned with the grid.

Key points

.container gives a different maximum width at each breakpoint.
It's always 100% viewport wide. (.container-fluid)
The breakpoint is 100% wide until the breakpoint is reached and then stops at a fixed width.
Containers become containers to accommodate columns. (.row)
Padding the left-right container equals the column grid to align.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.