Bootstrap 5 GridLesson 49Free preview

BS5 Grid Examples

This lesson is part of Bootstrap · All levels

Summary

This page collects examples of commonly used grid applications, such as two, three, four columns, as well as sidebar layouts and main content. These patterns become fast templates that stay tailored to the needs of the page. The key is to choose the right combination of breakpoints to make the display comfortable on all screens.

Key points

Common example: two columns (.col-md-6), three columns (.col-md-4), four columns (.col-md-3).
Another common layout: sidebar and content with a 3 to 9 ratio.
Use .col-* on a small screen as a mobile-first safety net.
Variations offset such as .offset-md-3 give the space of the column empty.
Example grid helps start a project without drawing a layout from scratch.

Full lesson

Code examples and quizzes

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