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>

Ankith Reddy

Updated on 12-Jun-2020 08:37:22

Previous Page Print Page Next Page