Bootstrap 5 GridLesson 42Free preview
BS5 Stacked/Horizontal
This lesson is part of Bootstrap · All levels
Summary
On a small screen, bootstrap columns are inherently stacked vertically. To have columns adjacent (horizontal) only on a particular screen, add a class with a breakpoint such as .col-md-4. This concept makes a single layout that can serve both mobile and desktop devices without duplication of code.
Key points
- Without breakpoints, the columns pile up vertically across all the screens.
- The .col-md-4 class makes columns adjacent starting with breakpoint md.
- The width of the column is calculated from 12 parts, so 4 is a third of the line.
- Various columns are added, e.g. .col-12 .col-md-4 for full display on mobile phones.
- Breakpoints sm, md, lg, xl, xxl can be selected as needed.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.