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.
