Bootstrap 5 GridLesson 41Free preview
BS5 Grid System
This lesson is part of Bootstrap · All levels
Summary
The Bootstrap grid consists of a container, row, and column that work together to form a responsive layout. Containers limit the maximum width, row wrap the column, and the column is divided into 12 adjustable sections per breakpoint. Thus one layout can adapt from a mobile phone screen to a desktop.
Key points
- The three core elements are: .container, .row, and .col-*.
- The grid is divided into 12 columns on each row.
- Each breakpoint (xs, sm, md, lg, xl, xxl) has its own column class.
- The responsive columns pile up on a small screen and then side by side on a big screen.
- Gutter or the distance between columns using the variables --bs-gutter-x and --bs-gutter-y.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.