Bootstrap Grid is a way to divide a page into columns. It’s based on a 12-column grid: any row can be split into parts that add up to 12.
Basic Structure
The grid uses three classes: container, row, col-*.
<div class="container">
<div class="row">
<div class="col-4">Left column</div>
<div class="col-4">Center column</div>
<div class="col-4">Right column</div>
</div>
</div>
col-4 + col-4 + col-4 = 12 โ the columns fill the full row width. You can split differently: col-3 + col-9, col-6 + col-6, etc.
Breakpoints
Bootstrap includes five breakpoints:
| Class | Width | Device |
|---|---|---|
col- |
< 576px | Phone (default) |
col-sm- |
โฅ 576px | Large phone |
col-md- |
โฅ 768px | Tablet |
col-lg- |
โฅ 992px | Laptop |
col-xl- |
โฅ 1200px | Desktop |
col-xxl- |
โฅ 1400px | Wide screen |
Classes work from the bottom up: col-md-6 means “6 columns from tablet and wider, full width on mobile.”
Responsive Columns
<div class="row">
<!-- Full width on mobile, half on tablet, one-third on desktop -->
<div class="col-12 col-md-6 col-lg-4">Card 1</div>
<div class="col-12 col-md-6 col-lg-4">Card 2</div>
<div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>
Rule: Multiple col-* classes on one element set the width for different screen sizes.
Auto-width Columns
If you don’t specify a number, Bootstrap divides space equally:
<div class="row">
<div class="col">Auto width 1</div>
<div class="col">Auto width 2</div>
<div class="col">Auto width 3</div>
</div>
Three col elements โ each takes one-third of the row.
Column Offset
<div class="row">
<div class="col-md-6 offset-md-3">
Centered content (skips 3 columns on the left)
</div>
</div>
offset-md-3 shifts the element three columns to the right. Works with all breakpoints: offset-lg-2, offset-sm-1, etc.
Nested Grids
Grids can be nested โ place a new row inside a column:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-6">Nested left</div>
<div class="col-6">Nested right</div>
</div>
</div>
<div class="col-md-4">Sidebar</div>
</div>
Example: DevBlog Card Grid
Three cards per row on desktop, one card per row on mobile:
<div class="container py-4">
<div class="row g-4">
<!-- g-4 sets the gap between cards (gutters) -->
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Article 1</h5>
<p class="card-text">A short description of the blog post.</p>
<a href="#" class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Article 2</h5>
<p class="card-text">A short description of the blog post.</p>
<a href="#" class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Article 3</h5>
<p class="card-text">A short description of the blog post.</p>
<a href="#" class="btn btn-primary">Read</a>
</div>
</div>
</div>
</div>
</div>
Behavior:
- Phone: 1 card per row (col-12)
- Tablet: 2 cards per row (col-md-6)
- Desktop: 3 cards per row (col-lg-4)
Alignment Inside a Row
<!-- Vertical alignment -->
<div class="row align-items-center">...</div>
<div class="row align-items-start">...</div>
<!-- Horizontal alignment -->
<div class="row justify-content-center">...</div>
<div class="row justify-content-between">...</div>
These classes are Flexbox wrappers โ a row in Bootstrap is a flex container.
๐ฌ Comments (0)
No comments yet
Be the first to share your opinion about this article!