Bootstrap breakpoints are min-width tiers: sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px. Unprefixed column classes apply to all sizes; prefixed classes apply from that breakpoint upward.
Mobile-first grid
Design the narrow layout first (col-12), then add col-md-6 or col-lg-4 when wider viewports need more columns—the same story as CSS media queries and Tailwind’s unprefixed + md: pattern.
Important interview questions and answers
- Q: What does col-lg-3 mean?
A: From lg (992px) up, the column spans 3/12 width; below lg, smaller breakpoint or base col-* rules apply. - Q: Can you skip sm and use md only?
A: Yes—prefixes are independent tiers; mobile-first means base styles cover xs until the first matching prefix kicks in.
Self-check
- At what width does the lg breakpoint start?
- Why stack columns on mobile before adding md splits?
Interview prep
- What does col-lg-6 mean?
At the
lgmin-width and up, the column spans half the row (6 of 12).