Bootstrap 5 Framework

Nesting and Complex Grids

13 min Lesson 6 of 40

Nesting and Complex Grids

Bootstrap's grid system becomes incredibly powerful when you nest grids within grids. This allows you to create sophisticated, multi-level layouts that adapt perfectly to different screen sizes.

1. Basic Grid Nesting

To nest your content, add a new .row and set of .col-* columns within an existing .col-* column:

<!-- Basic nested grid -->
<div class="container">
    <div class="row">
        <div class="col-12">
            <h3>Parent Row</h3>
            <!-- Nested row starts a fresh 12-column grid -->
            <div class="row">
                <div class="col-6">
                    Nested Column 1 (50% of parent)
                </div>
                <div class="col-6">
                    Nested Column 2 (50% of parent)
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Multi-level nesting -->
<div class="row">
    <div class="col-md-8">
        <h4>Main Content</h4>
        <div class="row">
            <div class="col-md-6">
                Article 1
                <div class="row">
                    <div class="col-6">Meta 1</div>
                    <div class="col-6">Meta 2</div>
                </div>
            </div>
            <div class="col-md-6">Article 2</div>
        </div>
    </div>
    <div class="col-md-4">
        <h4>Sidebar</h4>
    </div>
</div>
        

Key Concept: Each nested .row creates a fresh 12-column grid relative to its parent column. A col-6 inside a col-6 parent takes up 50% of that parent (which is 25% of the original container).

2. Nesting with Different Breakpoints

Combine nesting with responsive breakpoints for maximum flexibility:

<div class="container">
    <div class="row">
        <!-- Sidebar: Full width on mobile, 1/3 on desktop -->
        <div class="col-12 col-lg-4">
            <h3>Sidebar</h3>
            <!-- Nested grid for sidebar widgets -->
            <div class="row g-3">
                <div class="col-6 col-lg-12">
                    <!-- 2 columns on mobile, 1 column on large screens -->
                    <div class="card">
                        <div class="card-body">Widget 1</div>
                    </div>
                </div>
                <div class="col-6 col-lg-12">
                    <div class="card">
                        <div class="card-body">Widget 2</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main content: Full width on mobile, 2/3 on desktop -->
        <div class="col-12 col-lg-8">
            <h3>Main Content</h3>
            <!-- Nested grid for article layout -->
            <div class="row g-4">
                <div class="col-12">
                    <h4>Featured Article</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <img src="featured.jpg" class="img-fluid" alt="Featured">
                        </div>
                        <div class="col-md-8">
                            <p>Article excerpt...</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>Article 2</h5>
                </div>
                <div class="col-md-6">
                    <h5>Article 3</h5>
                </div>
            </div>
        </div>
    </div>
</div>
        

Tip: When nesting, consider how the layout stacks on mobile. Often, nested columns should be full-width (col-12) on mobile and split on larger screens.

3. Complex Dashboard Layout

Create a professional dashboard with nested grids and mixed breakpoints:

<div class="container-fluid">
    <!-- Header -->
    <div class="row bg-dark text-white py-3 mb-4">
        <div class="col">
            <h1>Dashboard</h1>
        </div>
    </div>

    <div class="row">
        <!-- Left Sidebar -->
        <div class="col-md-3 col-lg-2">
            <nav class="nav flex-column">
                <a class="nav-link" href="#">Overview</a>
                <a class="nav-link" href="#">Analytics</a>
                <a class="nav-link" href="#">Reports</a>
            </nav>
        </div>

        <!-- Main Content Area -->
        <div class="col-md-9 col-lg-10">
            <!-- Stats Cards -->
            <div class="row g-3 mb-4">
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">Total Users</h6>
                            <h2 class="card-title">12,543</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">Revenue</h6>
                            <h2 class="card-title">$45,890</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">Orders</h6>
                            <h2 class="card-title">892</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">Growth</h6>
                            <h2 class="card-title">+23%</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts and Tables -->
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Sales Overview</h5>
                            <!-- Chart would go here -->
                            <div style="height: 300px; background: #f0f0f0;">Chart</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Recent Activity</h5>
                            <!-- Nested list layout -->
                            <div class="row g-2">
                                <div class="col-12">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-success">+</span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <small>New user registered</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-primary">$</span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <small>Payment received</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        

4. E-commerce Product Grid

Build a complex product listing with nested filters and product cards:

<div class="container">
    <div class="row">
        <!-- Filters Sidebar -->
        <div class="col-lg-3">
            <h4>Filters</h4>
            <!-- Nested filter groups -->
            <div class="row g-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h6>Category</h6>
                            <!-- Category options -->
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h6>Price Range</h6>
                            <!-- Price filter -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="col-lg-9">
            <div class="row g-4">
                <!-- Each product card -->
                <div class="col-sm-6 col-md-4">
                    <div class="card h-100">
                        <img src="product1.jpg" class="card-img-top" alt="Product">
                        <div class="card-body">
                            <h5 class="card-title">Product Name</h5>
                            <!-- Nested row for product info -->
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <span class="h5 mb-0">$29.99</span>
                                </div>
                                <div class="col-6 text-end">
                                    <div class="text-warning">★★★★☆</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <!-- Nested row for buttons -->
                            <div class="row g-2">
                                <div class="col-6">
                                    <button class="btn btn-primary w-100">Buy</button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-outline-secondary w-100">Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Repeat for more products -->
            </div>
        </div>
    </div>
</div>
        

5. Blog Post Layout

Create a sophisticated blog post layout with nested content areas:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <article>
                <!-- Article Header -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h1>Article Title</h1>
                        <!-- Nested meta information -->
                        <div class="row align-items-center text-muted">
                            <div class="col-sm-auto">
                                <img src="avatar.jpg" class="rounded-circle" width="40" alt="Author">
                            </div>
                            <div class="col-sm">
                                <div>By John Doe</div>
                                <small>Published Jan 15, 2024</small>
                            </div>
                            <div class="col-sm-auto">
                                <span>5 min read</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Featured Image -->
                <div class="row mb-4">
                    <div class="col-12">
                        <img src="featured.jpg" class="img-fluid rounded" alt="Featured">
                    </div>
                </div>

                <!-- Article Content -->
                <div class="row">
                    <div class="col-lg-8">
                        <p>Article content here...</p>

                        <!-- Nested blockquote -->
                        <div class="row my-4">
                            <div class="col-md-10 offset-md-1">
                                <blockquote class="blockquote">
                                    <p>"This is an important quote from the article."</p>
                                </blockquote>
                            </div>
                        </div>

                        <!-- Nested image gallery -->
                        <div class="row g-3 my-4">
                            <div class="col-6">
                                <img src="gallery1.jpg" class="img-fluid rounded" alt="Gallery">
                            </div>
                            <div class="col-6">
                                <img src="gallery2.jpg" class="img-fluid rounded" alt="Gallery">
                            </div>
                        </div>

                        <p>More article content...</p>
                    </div>

                    <!-- Sidebar -->
                    <div class="col-lg-4">
                        <div class="sticky-top" style="top: 20px;">
                            <!-- Table of Contents -->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6>Table of Contents</h6>
                                    <nav class="nav flex-column">
                                        <a class="nav-link" href="#section1">Introduction</a>
                                        <a class="nav-link" href="#section2">Main Content</a>
                                        <a class="nav-link" href="#section3">Conclusion</a>
                                    </nav>
                                </div>
                            </div>

                            <!-- Related Articles -->
                            <div class="card">
                                <div class="card-body">
                                    <h6>Related Articles</h6>
                                    <!-- Nested article list -->
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <div class="row g-2">
                                                <div class="col-4">
                                                    <img src="thumb1.jpg" class="img-fluid rounded" alt="Thumb">
                                                </div>
                                                <div class="col-8">
                                                    <small><a href="#">Related Article 1</a></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>
        

6. Common Layout Patterns

Here are proven patterns for nesting grids effectively:

<!-- Pattern 1: Holy Grail Layout -->
<div class="container-fluid">
    <header class="row"><div class="col">Header</div></header>
    <div class="row flex-grow-1">
        <nav class="col-md-2">Left Sidebar</nav>
        <main class="col-md-8">
            <div class="row">
                <!-- Nested content grid -->
            </div>
        </main>
        <aside class="col-md-2">Right Sidebar</aside>
    </div>
    <footer class="row"><div class="col">Footer</div></footer>
</div>

<!-- Pattern 2: Magazine Layout -->
<div class="container">
    <div class="row">
        <div class="col-12 col-lg-8">
            <!-- Featured Story (large) -->
            <div class="row mb-4">
                <div class="col-12">Featured</div>
            </div>
            <!-- Grid of smaller stories -->
            <div class="row g-3">
                <div class="col-6">Story</div>
                <div class="col-6">Story</div>
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <!-- Sidebar with widgets -->
            <div class="row g-3">
                <div class="col-12">Widget</div>
            </div>
        </div>
    </div>
</div>

<!-- Pattern 3: Card Masonry -->
<div class="row g-4">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <div class="row g-2">
                    <!-- Nested grid inside card -->
                    <div class="col-12">Title</div>
                    <div class="col-6">Info 1</div>
                    <div class="col-6">Info 2</div>
                </div>
            </div>
        </div>
    </div>
</div>
        

Avoid Common Nesting Mistakes:

Don't nest rows directly inside rows - always put a column between them
Don't forget to add .row when nesting - without it, columns won't align properly
Avoid excessive nesting (more than 3-4 levels) - it becomes hard to maintain
Remember that gutters reset with each new row - adjust if needed

Practice Exercise

Create a complete landing page with these nested sections:

Hero Section: Full-width with centered content containing:
- Heading
- Subheading
- Two buttons side-by-side
Features Section: Three feature cards, each containing:
- Icon (use placeholder)
- Title and description
- Nested grid showing 2 sub-features per card
Pricing Section: Three pricing tiers, each with:
- Price and plan name
- Nested list of features (2-column layout)
- CTA button
Testimonials: 2-column grid on desktop, 1 column on mobile, each testimonial showing:
- Quote text
- Nested row with avatar and author info side-by-side

Make it fully responsive: single column on mobile, 2 columns on tablet, 3 columns on desktop for the features and pricing sections.

Best Practices for Complex Grids:

Start with the overall layout structure, then add nested details
Use g-* classes on nested rows to control spacing independently
Test each nesting level on mobile before adding the next level
Use browser DevTools to inspect and debug grid structures
Consider using CSS Grid for very complex layouts (Bootstrap 5 supports both)
Document complex nested structures with comments in your code