❮ Previous Next ❯

Advanced Grid

  • Advanced techniques for building complex layouts using Bootstrap grid.

  • Introduction to the Nested Grid System

    In real-world layouts, a single row with columns is often not enough.

    Complex pages such as:

    • Dashboards

    • Blog layouts

    • E-commerce pages

    • Admin panels

    require layouts inside layouts.

    This is where the Nested Grid System of Bootstrap comes into play.

    Nesting allows you to:

    • Create grids inside columns

    • Build multi-level layouts

    • Control structure at a deeper level

    • Maintain responsiveness at every level

    What is a Nested Grid ?

    A nested grid means:

    • Creating a new grid (row + columns)

    • Inside an existing column

    Important clarification:

    • You cannot nest columns directly inside columns

    • A row is always required between columns

    Correct structure:

    Container

     └── Row

          └── Column

               └── Row   (nested)

                    └── Column

  • Why Nested Grids Are Needed

    Nested grids are required when:

    • A column contains multiple sections

    • Content inside a column needs its own layout

    • Sidebar has sub-sections

    • Cards inside a column need alignment

    • A page has hierarchical layout levels

    Without nesting, layouts become rigid and unmanageable.

    Core Rule of Nested Grid 

    Golden Rule:

    A nested grid must always start with a .row inside a .col.

Core Rule of Nested Grid

A nested grid must always start with a .row inside a .col. Placing .col directly inside another .col breaks the Bootstrap grid structure. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid Rule</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-4">
    <div class="row">
      <div class="col bg-primary text-white p-3">
        Parent Column

        <!-- ❌ Incorrect -->
        <div class="col bg-danger text-white p-2 mt-3">
          Invalid (No .row)
        </div>

        <!-- ✅ Correct -->
        <div class="row mt-3">
          <div class="col bg-success text-white p-2">
            Valid (Inside .row)
          </div>
        </div>

      </div>
    </div>
  </div>

</body>
</html>

  • Breaking this rule causes spacing and alignment issues.

    Basic Nested Grid Example

    Layout Goal:

    • Main layout: two columns

    • Left column contains two inner columns

Basic Nested Grid Layout

Creates a two-column main layout where the left column contains a nested row with two inner columns, following Bootstrap’s nested grid rule. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-4">
    <div class="row">
      
      <!-- Left Main Column -->
      <div class="col-md-8 bg-light p-3">
        <h5>Main Content</h5>

        <!-- Nested Row -->
        <div class="row mt-3">
          <div class="col-6 bg-primary text-white p-3">
            Nested Column 1
          </div>
          <div class="col-6 bg-success text-white p-3">
            Nested Column 2
          </div>
        </div>
      </div>

      <!-- Right Main Column -->
      <div class="col-md-4 bg-secondary text-white p-3">
        Sidebar
      </div>

    </div>
  </div>

</body>
</html>

  • Explanation:

    • Outer row creates main layout

    • Left column (col-md-8) holds a nested row

    • Nested row has its own 12-column system

    • Inner columns divide space independently

      Understanding Column Math in Nested Grids

      Each row (including nested rows) has its own 12-column system.

      Important concept:

      • Nested columns do not depend on parent column width

      • They always divide their own row, not the full page

    Understanding Column Math in Nested Grids

    Each row has its own 12-column system. Nested columns divide their own row, not the full page—so col-6 inside another col-6 means half of that parent column. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid Math</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-4">
    <div class="row text-center">
      
      <!-- Parent Column (6 out of 12) -->
      <div class="col-6 bg-light p-3">
        Parent (col-6)

        <!-- Nested Row -->
        <div class="row mt-3">
          <div class="col-6 bg-primary text-white p-3">
            Half of Half
          </div>
          <div class="col-6 bg-success text-white p-3">
            Half of Half
          </div>
        </div>
      </div>

      <div class="col-6 bg-secondary text-white p-3">
        Other Half
      </div>

    </div>
  </div>

</body>
</html>

    • Result:

      • Parent column = 50% width

      • Nested columns = 50% of that 50%

      • Effective width = 25% each

      This proportional behavior is essential to understand.

      Nested Grid with Responsive Behavior

    Responsive Nested Grid Layout

    The sidebar appears beside the main content on large screens, while nested columns stack on mobile and become two columns from medium screens and above. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Nested Grid</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-4">
    <div class="row text-center">

      <!-- Main Content Area -->
      <div class="col-lg-9 bg-light p-3">
        <h5>Main Section</h5>

        <!-- Nested Row -->
        <div class="row mt-3">
          <div class="col-12 col-md-6 bg-primary text-white p-3 mb-3">
            Content A
          </div>
          <div class="col-12 col-md-6 bg-success text-white p-3 mb-3">
            Content B
          </div>
        </div>
      </div>

      <!-- Sidebar -->
      <div class="col-lg-3 bg-secondary text-white p-3">
        Sidebar
      </div>

    </div>
  </div>

</body>
</html>

    • Behavior:

      • Mobile: all content stacked

      • Tablet: nested columns side by side

      • Desktop: sidebar appears beside content

      Each grid level responds independently.

      Real-World Use Case 

       Blog Layout

      • Main content column

      • Inside it: title, meta info, content sections

      Dashboard Layout

      • Page divided into sidebar + content

      • Content divided into cards

      • Cards contain internal grids

      Product Page

      • Product image + details

      • Details section split into pricing, options, actions

      Nested grids make all of these possible.

      Spacing and Gutters in Nested Grids

      By default:

      • Nested rows inherit Bootstrap gutters

      • Padding is applied consistently

      However:

      • Nested layouts may appear cramped

      • Spacing utilities are often applied to nested columns

      This is normal and expected in advanced layouts.

      Common Mistakes

      1. Nesting columns without a row

      2. Forgetting that nested rows have their own 12 columns

      3. Over-nesting unnecessarily

      4. Making layouts too complex too early

      5. Ignoring mobile behavior in nested grids

      Nested grids should be used intentionally, not everywhere.

      When to Use Nested Grids

      Use nested grids when:

      • Layout hierarchy is required

      • Content inside columns needs structure

      • Components need internal alignment

      Avoid nested grids when:

      • Simple utilities can solve the problem

      • Flex utilities are sufficient

      • Layout becomes hard to read

    ❮ Previous Next ❯