← Back to Examples
Bootstrap Grid System Demo
Resize your browser window to see the responsive behavior!
1. The 12-Column Grid
Bootstrap divides the page into 12 equal columns:
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
... (12 columns total)
</div>
2. Equal Width Columns
Two equal columns (col-6 + col-6):
Three equal columns (col-4 + col-4 + col-4):
Four equal columns (col-3 each):
Six equal columns (col-2 each):
3. Unequal Columns (Sidebar + Content)
Sidebar (col-3) + Content (col-9):
Sidebar (col-4) + Content (col-8):
Three columns: Sidebar (col-2) + Content (col-7) + Aside (col-3):
4. Responsive Columns (Resize Your Browser!)
Columns change at different breakpoints. Try resizing your browser window!
Full on mobile, half on tablet, third on desktop:
col-12 col-md-12 col-lg-4
<div class="row">
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-12 col-lg-4">...</div>
</div>
Breakpoints:
- xs (<576px): 1 column (col-12)
- md (768px+): 2 columns (col-md-6)
- lg (992px+): 3 columns (col-lg-4)
Full on mobile, sidebar layout on desktop:
Main Content
col-12 col-lg-9
5. Auto-width & Equal Columns
Auto equal columns (col):
One fixed, rest auto:
Auto-size based on content (col-auto):
Variable width content here
6. Nested Grids
<div class="row">
<div class="col-8">
Parent
<div class="row"> <!-- Nested row -->
<div class="col-6">Nested</div>
<div class="col-6">Nested</div>
</div>
</div>
<div class="col-4">Sidebar</div>
</div>
7. Gutters (Spacing Between Columns)
Default gutter (g-3):
No gutter (g-0):
Large gutter (g-5):
← Back to Examples