Bootstrap nested rows and columns

Suggested Video Tutorials
Part 3 - Bootstrap grid system
Part 4 - Bootstrap 3 grid classes
Part 5 - Bootstrap grid column offset



In this video we will discuss nested rows and columns in Bootstrap



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;

}