Bootstrap Grid System
Bootstrap Grid System
The Bootstrap Grid System is one of the core features of Bootstrap. It allows you to create responsive layouts for all screen sizes using a series of rows and columns.
✅ How It Works
Bootstrap’s grid system is based on 12 columns. You can divide your layout across these columns using classes.
Example:
| Layout | Result |
|---|---|
.col-12 | Full width |
.col-6 + .col-6 | Two equal halves |
.col-4 + .col-8 | One-third and two-thirds |
📌 Bootstrap Breakpoints (Responsive Grid Classes)
| Class Prefix | Screen Size | Width |
|---|---|---|
col- | Extra small | <576px |
col-sm- | Small | ≥576px |
col-md- | Medium | ≥768px |
col-lg- | Large | ≥992px |
col-xl- | Extra large | ≥1200px |
📌 Basic Grid Example
📌 Responsive Example
📌 Nesting Columns
You can place rows and columns inside another column.
📌 Column Offsets
Offsets allow spacing by skipping columns.
📌 Reordering Columns
You can reorder using order-*.
📌 Equal-width Columns
No need to specify numbers; Bootstrap divides them automatically.
🎯 Summary
The grid uses 12 columns.
Use breakpoints to make layout responsive.
Features: Nesting, offsets, alignment, and auto columns.
