Nesting Columns in Bootstrap
To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column.
You can try to run the following code to learn how to implement nesting columns in Bootstrap −
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "box">
<h1>Heading</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: gray; color: white;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Heading</h4>
<p>This is demo text.</p>
</div>
<div class = "col-md-9" style = "background-color: gray;color: white;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Heading</h4>
<p>This is demo text.</p>
<div class = "row">
<div class = "col-md-6" style = "background-color: orange;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>This is box 1.</p>
</div>
<div class = "col-md-6" style = "background-color: orange;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>This is box 2.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: orange;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>This is box 3.</p>
</div>
<div class = "col-md-6" style = "background-color: orange;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>This is box 4.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Published on 14-Jun-2018 08:51:30
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP