Nesting Grids in Bootstrap

Nesting Grids In Bootstrap, Nesting Grid simply consistent of a new grid inside an existing column i.e., rows and columns.

Think of it as a set of Russian nesting dolls: there’s a big box (a column), and inside, you decide to put all sorts of little tiny grids in there so that they can organize the smaller things.

How It Works

When you nest a grid, the parent column becomes a “mini-container.” Here are the simple rules:

Begin with a Column: You need to be inside this starts with a .col-*.

Insert New Row: Inside that column, add a new <div class=”row”>.

Add New Columns: Inside that new row, add your nested columns.

Resetting the “12” Rule: Despite living inside a small column, that nested row is still 12 units wide to any children it creates itself.

Simple Code Example

Here’s how you would divide a page in two and then divide the last half again into two smaller parts:

HTML <div class=”container”> <div class=”row”> <div class=”col-6″> Main Left Side </div>

<div class="col-6">
  Main Right Side
  
  <div class="row">
    <div class="col-6">Nested Small Left</div>
    <div class="col-6">Nested Small Right</div>
  </div>
</div>

</div> </div>

Why Use It?

Complex Layouts: Necessary for dashboards, comment sections (with a text next to profile pic) and any complex card design.

Alignment: It allows you to align contents perfectly within a portion of the page without disrupting the entire layout.

Responsiveness: Just as with the main grid system, you can tell nested columns to stack on mobile or stretch across multiple columns like col-sm-12 col-md-6.

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.