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 www . j a v a 2 s . com-->
<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>