Grid System
Bootstrap\'s grid divides a row into twelve logical columns and combines that system with responsive breakpoints to build page layouts.
Core concept
Explain the container-row-column relationship, the twelve-unit mental model, automatic wrapping, and why structural columns should not be replaced by arbitrary widths. Show how 4+4+4, 3+6+3, and 2+8+2 describe different compositions.
Using it in a real interface
Explain how the same row can use different spans at different breakpoints. A common mobile pattern is one column per row, while desktop can place several related regions side by side.
Implementation notes
Use the grid for major layout relationships such as content/sidebar, card collections, and form fields. Use flex and spacing utilities for local alignment rather than forcing every small adjustment into column math.