Columns size with breakpoint prefixes: col-12 col-md-6 col-lg-4 means full width on mobile, half on medium, third on large. Use row-cols-* on the row to set equal columns without sizing every child.
Advanced column tools
col-auto— shrink to content widthoffset-md-2— push a column right by empty tracksorder-*— reorder visually without changing DOM order carelessly- Nested
.rowinside a.col— sub-grids inherit gutter behavior
Important interview questions and answers
- Q: What does col-md-6 mean?
A: From the md breakpoint upward, the column spans 6 of 12 tracks (50% width); below md, earlier col-* rules apply. - Q: row-cols-3 vs three col-4 elements?
A:row-cols-3makes each direct child one-third width; explicitcol-4sets span per element—pick based on whether children are uniform.
Self-check
- Write classes for a column that is full width on mobile and half width on md+.
- When is nesting a row inside a column valid?