Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Nesting Columns in Bootstrap 5
Column Nesting: Place grids within grids to create more complex layouts.
What is Column Nesting?
Nesting is when you place a new grid (row with columns) inside an existing column. This allows you to create more complex layouts without leaving the grid system.
Simple Grid
Column
Column
Basic two-column layout.
Nested Grid
Nested
Nested
Column
Grid inside a grid - more complex layout.
Basic Nesting Example
Simple Nested Grid
Main Column (8 cols)
Nested Column 1 (6 cols)
Nested Column 2 (6 cols)
Sidebar (4 cols)
<div class="container">
<div class="row">
<!-- Main Column -->
<div class="col-8">
<div class="row"> <!-- Nested row -->
<div class="col-6">Nested Column 1</div>
<div class="col-6">Nested Column 2</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-4">Sidebar</div>
</div>
</div>Important: When nesting, always include a new
.row inside the parent column. The nested columns will then divide the width of their parent column.Nesting Depth Levels
Multiple Level Nesting
Level 1: Basic Grid
Level 1
Level 1
Level 2: One Level Nesting
Level 2
Level 2
Level 1
Level 3: Deep Nesting
Level 3
Level 3
Level 2
Level 1
Best Practice: Avoid nesting more than 2-3 levels deep as it can make your HTML complex and hard to maintain.
Responsive Nested Grids
Nesting with Breakpoints
Main Content
.col-12 .col-md-6
Full on mobile, half on desktop
Full on mobile, half on desktop
.col-12 .col-md-6
Full on mobile, half on desktop
Full on mobile, half on desktop
Sidebar
Fixed width on desktop
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-12 col-md-6">
<!-- Responsive nested column -->
</div>
<div class="col-12 col-md-6">
<!-- Responsive nested column -->
</div>
</div>
</div>
<div class="col-md-4">
<!-- Sidebar -->
</div>
</div>
</div>Practical Nesting Examples
Example 1: Blog Post with Comments
Blog Post
Comments Section
Comment 1
Comment 2
Author Info
Perfect for content with nested sections like comments or replies.
Example 2: Dashboard with Widgets
Main Widget
Metric 1
Metric 2
Secondary Widget
Side Panel
Great for complex dashboard layouts with nested metrics.
Nesting with Gutters
Managing Spacing in Nested Grids
Without Proper Gutter Management
Nested - no gutters
Nested - no gutters
Parent Column
With Gutters
Nested with gutter
Nested with gutter
Parent Column
Tip: Always add
g-* classes to nested rows to maintain proper spacing. You can use different gutter sizes for different nesting levels.Advanced Nesting Patterns
Pattern 1: Card with Stats
Stat
Stat
Stat
Useful for dashboard cards with multiple metrics.
Pattern 2: Form with Input Groups
Input
Button
Perfect for search bars and inline forms.
Pattern 3: Gallery Grid
Image
Image
Image
Image
Great for photo galleries and image grids.
Nesting Best Practices
When to Use Nesting
- ✅ When you need complex layouts within a column
- ✅ For organizing related content sections
- ✅ When creating card-based designs with internal grids
- ✅ For responsive designs that need different layouts at different levels
When to Avoid Nesting
- ❌ When a simple grid would suffice
- ❌ When nesting more than 3 levels deep
- ❌ When it makes HTML overly complex
- ❌ When you can use CSS Grid or Flexbox instead
Common Nesting Mistakes
- ❌ Forgetting to add
.rowinside the column - ❌ Not managing gutters properly
- ❌ Nesting too deeply (creates maintenance issues)
- ❌ Using nesting when auto layout would work better
- ❌ Not testing responsive behavior of nested grids
Performance Considerations
Lightweight Nesting
<!-- Good: Simple nesting -->
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">Content</div>
<div class="col-6">Content</div>
</div>
</div>
</div>Minimal DOM elements, good performance.
Heavy Nesting
<!-- Avoid: Deep nesting -->
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<!-- Too deep! -->
</div>
</div>
</div>
</div>
</div>
</div>Many DOM elements, slower rendering.
