Bootstrap nested rows and columns

In this we will discuss nested rows and columns in Bootstrap 

Bootstrap tutorial for beginners

Bootstrap supports nested rows and columns. This means rows and columns can be placed inside an existing column. The formula for the the nested row is also the same, i.e the columns in the nested row should add up to 12 or fewer. However, please note that it is not required that you use all 12 available columns.

Let's understand nested rows and columns with an example. Let us say, we want to create a layout as shown below. 



This can be very easily achieved by nesting rows and columns. Notice in the first column in the first row, we have 2 nested rows.

<div class="container">

    <div class="row">

        <div class="col-xs-3">

            <!--Nested row-->

            <div class="row">

                <div class="col-xs-12">

                    <div class="sidebarContent">Side Bar 1</div>

                </div>

            </div>

            <!--Nested rows-->

            <div class="row">

                <div class="col-xs-12">

                    <div class="sidebarContent">Side Bar 2</div>

                </div>

            </div>

        </div>

        <div class="col-xs-9">

            <div class="mainContent">Main Content Area</div>

        </div>

    </div>

</div>

Please not that we have applied some custom styles to the div elements to make the output pretty. The custom styles are in CustomStyles.css.

.sidebarContent{

    background-color:silver;

    text-align:center;

    font-size:large;

    min-height:150px;

    margin-bottom:10px;

}

.mainContent{

    background-color:silver;

    text-align:center;

    font-size:large;

    min-height:310px;

}

Let us look at another example, where nesting rows and columns is useful. Let us say we want 3 columns and the columns should be split as shown below.
col 5 | col 3.5 | col 3.5 

 

The easiest way to achieve this is by nesting rows and columns

<div class="container">

    <div class="row">

        <div class="col-xs-5">

            <div class="customDiv">col 5</div>

        </div>

        <div class="col-xs-7">

            <div class="row">

                <div class="col-xs-6">

                    <div class="customDiv">col 3.5</div>

                </div>

                <div class="col-xs-6">

                    <div class="customDiv">col 3.5</div>

                </div>

            </div>

        </div>

    </div>

</div>

The following custom style is used with this example.

.customDiv {

    background-color: silver;

    text-align: center;

    font-size: large;

    min-height: 150px;

}