Bootstrap Grid Cheatsheet
Quick reference for Bootstrap grid: containers, rows, columns, breakpoints, order & alignment utilities.
| Property / Class | Description | Example | Category |
|---|---|---|---|
| .container | Fixed width responsive container | <div class="container"> | Container |
| .container-fluid | Full-width container | <div class="container-fluid"> | Container |
| .row | Horizontal group of columns | <div class="row"> | Rows |
| .g-* / .gx-* / .gy-* | Grid gap spacing | <div class="row g-3"> | Rows |
| .col | Auto-sized column | <div class="col"> | Columns |
| .col-# | Fixed column width (1–12) | <div class="col-6"> | Columns |
| .col-sm-|md-|lg-|xl-|xxl- | Responsive column sizes | <div class="col-md-4"> | Responsive |
| .offset-# | Push column right by # | <div class="offset-2"> | Alignment & Order |
| .order-* | Control order of grid items | <div class="order-2"> | Alignment & Order |
| .align-items-* | Align row items vertically | <div class="row align-items-center"> | Alignment & Order |
| .justify-content-* | Align row items horizontally | <div class="row justify-content-between"> | Alignment & Order |
| .d-flex .d-grid | Use grid or flex utilities | <div class="d-grid gap-2"> | Utilities |