Bootstrap Tutorial - Tutorial on creating nested columns using Bootstrap








Nesting columns

To nest your content with the default grid, add a new .row and set of .col-lg-* columns within an existing .col-lg-* column. Nested rows should include a set of columns that add up to 12.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from  ww  w.j av  a 2  s.  c  o m-->
<body style='margin:20px;'>
<div class="row">
  <div class="col-lg-9">
    Level 1: 9 columns
    <div class="row">
      <div class="col-lg-6">
        Level 2: 6 columns
      </div>
      <div class="col-lg-6">
        Level 2: 6 columns
      </div>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo