The Grid System is the backbone of Bootstrap’s responsive design. It allows you to structure and align content in a flexible and predictable layout across devices—from mobile phones to large desktops.
What is the Bootstrap Grid System?
Bootstrap’s grid system is based on a 12-column layout. It uses a combination of containers, rows, and columns to layout and align content.
-
Container: The outermost element that centers and pads your content.
-
Row: A horizontal group of columns.
-
Column (
col): A content holder that scales depending on screen size.
Basic Structure
Here’s how a simple grid looks:
Each .col takes equal width, dividing the row into 3 equal parts. Bootstrap automatically adjusts these on smaller screens.
Responsive Columns
You can control how columns behave on different screen sizes using breakpoint-specific classes:
| Breakpoint | Class Prefix | Screen Size |
|---|---|---|
| Extra Small | .col- |
<576px |
| Small | .col-sm- |
≥576px |
| Medium | .col-md- |
≥768px |
| Large | .col-lg- |
≥992px |
| Extra Large | .col-xl- |
≥1200px |
Example:
-
On small screens, each column takes 50% width.
-
On medium screens, the first takes 4/12 (33%) and the second takes 8/12 (66%).
Fixed Width vs Full Width Containers
Bootstrap has two types of containers:
-
.container: Fixed-width and centered. -
.container-fluid: Full-width, always takes 100% of the viewport.
Example:
Nesting Columns
You can nest columns inside another column:
✅ Conclusion
The Bootstrap grid system is a powerful tool for building responsive layouts without writing custom CSS. Understanding how rows, columns, and breakpoints work will allow you to create fluid, adaptive designs that look great on all screen sizes.
