Bootstrap 5 Grid system Nesting

Last Updated : 11 Jan, 2023

Bootstrap 5 Grid system Nesting is adding rows and columns of the grid in one cell of an already existing grid. To implement nesting we need to add the .col column classes inside an already existing grid column and make a proper grid inside a single grid column. This nested grid can be also made into a responsive grid.

Grid system Nesting Classes: No special classes are used in Grid system Nesting. You can customize the component using the classes of the Grid system.

Syntax:

<div class="row">
    <div class="col">
      <!-- Column Value --!>
    </div>
    <div class="col">
          <div class="col">
              <!-- Column Value --!>
        </div>
        <div class="col">
              <!-- Column Value --!>
        </div>
    </div>
</div>

Example 1: The code in the example shows you we can implement a Simple Nested Grid.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap 5 Grid system Nesting</h3> 
        <div class="container"> 
            <div class="row"> 
                <div class="col bg-secondary border"> 
                    Column 1 
                </div> 
                <div class="col bg-secondary border"> 
                    Column 2 
                </div> 
                <div class="col bg-secondary border"> 
                    <div class="container"> 
                        <div class="row"> 
                            <div class="col bg-success"> 
                                Small Col 1 
                            </div> 
                            <div class="col bg-success"> 
                                Small Col 2 
                            </div> 
                            <div class="col bg-success"> 
                                Small Col 3 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how we can implement our own responsive classes inside the Nested grid.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap 5 Grid system Nesting</h3> 
        <div class="container"> 
            <div class="row"> 
                <div class="col-md-2 bg-light  
                            border border-warning"> 
                    Outer: col-md-2 
                </div> 
                <div class="col-md-10 bg-light text-light  
                            border border-warning"> 
                    <div class="row"> 
                        <div class="col-6 col-md-4 bg-success  
                                    border border-warning"> 
                            Nested: .col-6 .col-md-4 
                        </div> 
                        <div class="col-6 col-md-8 bg-success  
                                    border border-warning"> 
                            nested: .col-6 .col-md-8 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>