In this tutorial you will be “nesting the Bootstrap grid”. This is when you place 1 or more columns inside of another to make a grid within a grid.
Starting code for this tutorial
We’ll be starting with the code below, placed inside of the basic template that we created in tutorial number 3.
<div class="container">
<div class="row">
<div class="col-lg-12 bg-success">
<p>This is an other div</p>
<!-- your code here -->
</div>
</div>
</div>
Nesting the Bootstrap grid
To nest your content within the default grid, you simply add in a new
.row, and a set of columns with any break point of your choice, the default Bootstrap behavior for normal columns will apply to all nested columns as well. I’ve chosen.col-lg-6 and nested it inside another column that has a class of .col-lg-12. This means that the parent column will take up the full width of the grid, while the child column should only take up half of it’s parent width.
Please note that I forgot to add the at the beginning of my video tutorial, but I added it in towards the end. Documentation on the Bootstrap site advises that this class should be used. This will get rid of the problem that I address in the last 2 minutes in the video above.
<div class="container">
<div class="row">
<div class="col-lg-12 bg-success">
<p>This is an other div</p>
<div class="row">
<div class="col-lg-6 bg-primary">
<p>This is an inner div</p>
</div>
</div>
</div>
</div>
</div>
An important note to remember is that a child column’s width is determined by the width of it’s parent, and not the width of main grid. This mean’s that if we change the width of the parent, the child column will be affected as well. You can see the example in the code below and refer to 3:10 in the video above for an example.
<div class="container">
<div class="row">
<div class="col-lg-6 bg-success">
<p>This is an other div</p>
<div class="row">
<div class="col-lg-6 bg-primary">
<p>This is an inner div</p>
</div>
</div>
</div>
</div>
</div>
0 comments