Bootstrap 5 GridLesson 45Free preview

BS5 Grid Medium

This lesson is part of Bootstrap · All levels

Summary

The breakpoint medium (md) is active starting at 768 pixels screen width, generally marking the tablet upwards. Classes like .col-md-6 make columns adjacent only to that size, while on mobile phones columns accumulate. The combination of .col-12 .col-md-6 is often used to keep content readable on all devices.

Key points

The active screen width starts at >=768px. (.col-md-)
On a screen smaller than md, the md column stacks vertically.
Md is often used for small tablet and laptop layouts.
The combination of the two applies the principle of mobile-first. (.col-12) (.col-md-)
Containers on md have a maximum width of 720px.

Full lesson

Code examples and quizzes

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