Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.

nesting bootstrap columns

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

bootstrap half column width

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;
}

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.