Bootstrap Grid System
Bootstrap uses a 12-column flexbox grid with responsive breakpoints.
Breakpoints
| Breakpoint | Class | Width |
|---|---|---|
| Extra small | (none) | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| XL | xl | ≥1200px |
| XXL | xxl | ≥1400px |
Basic Grid
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>Responsive
<div class="col-12 col-sm-6 col-lg-4">
Full width → half → third
</div>