Bootstrap’s grid is a mobile-first flexbox layout: a .container (or .container-fluid) wraps .row elements, and each .col-* divides horizontal space into up to twelve equal tracks.
Core building blocks
.row— flex container with negative horizontal margins cancelled by column padding.color.col-6— flexible or fixed-width columns.g-*— gutter utilities on the row (g-3,gx-4,gy-2)
Concepts from CSS flexbox and CSS grid still apply—Bootstrap wraps them in predictable class names. Tailwind’s grid-cols-12 solves a similar problem with utilities instead of col-md-4.
Important interview questions and answers
- Q: Why twelve columns?
A: Twelve divides evenly by 2, 3, 4, and 6—common layout splits without fractional math in markup. - Q: Flexbox or CSS Grid in Bootstrap 5?
A: The main grid uses flexbox rows/columns; CSS Grid utilities exist separately for two-dimensional layouts when needed.
Self-check
- What three classes form the smallest valid grid?
- What does
g-3control?
Challenge
Three-column row
- Create a
.rowwith three.col-md-4columns. - Narrow the preview below
md— columns should stack.
Done when: three equal columns on medium+ viewports, stacked on small screens.
Interview prep
- How many columns in the default grid?
Twelve columns per row; breakpoints control when column classes apply.