January 26, 2016

Nested Columns in Bootstrap 3 with Example

By Krishnaa Bootstrap 0 Comments

So 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.

<!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>

You May Also Like: