Nested Columns in Bootstrap 3 with Example

bootstrapSo far, you know that we can have only 12 columns in a single row in a Grid System.  You can nest more columns and rows within each of those 12 columns.  The nested column will take the entire width of the parent column and will form another 12 columns within it.  You can further nest more columns within that nested column.  Example is given below.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background-color: red; color: white"><h1>Parent 1</h1>
<div class="row">
<div class="col-xs-6" style="background-color: black; color: white"><h1>Child 1</h1></div>
<div class="col-xs-6" style="background-color: black; color: white"><h1>Child 2</h1></div>
</div>
</div>
<div class="col-xs-6" style="background-color: green; color:white"><h1>Parent 2</h1>
<div class="row">
<div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 1</h1></div>
<div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 2</h1></div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial </title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6" style="background-color: red; color: white"><h1>Parent 1</h1> <div class="row"> <div class="col-xs-6" style="background-color: black; color: white"><h1>Child 1</h1></div> <div class="col-xs-6" style="background-color: black; color: white"><h1>Child 2</h1></div> </div> </div> <div class="col-xs-6" style="background-color: green; color:white"><h1>Parent 2</h1> <div class="row"> <div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 1</h1></div> <div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 2</h1></div> </div> </div> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial </title>
 	
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
 </head>
<body>
 
<div class="container-fluid">
 	<div class="row">
 		<div class="col-xs-6" style="background-color: red; color: white"><h1>Parent 1</h1>
 			<div class="row">
 				<div class="col-xs-6" style="background-color: black; color: white"><h1>Child 1</h1></div>
 				<div class="col-xs-6" style="background-color: black; color: white"><h1>Child 2</h1></div>
 			</div>
		</div> 			
 		<div class="col-xs-6" style="background-color: green; color:white"><h1>Parent 2</h1>
 			<div class="row">
 				<div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 1</h1></div>
 				<div class="col-xs-6" style="background-color: brown; color: white"><h1>Child 2</h1></div>
 			</div>
 		</div>
 	</div>
 </div>
 
</body>
</html>