Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

2 comments:

  1. Why you have again divided the rows in example1 as col-xs-12 and in example2 you directly wrote col-xs-6 for division.

    ReplyDelete
  2. This is a wonderful course and you are a fantastic teacher - you have a gift my friend. Thank you so much for posting these lessons. I finally figured out that this course is in Bootstrap 3. I have loaded both and am switching back and forth between versions. Once I used version 3 everything started working. I am surprised that version 4 of Bootstrap in not backward compatible with version 3. Thanks again for sharing your work.

    ReplyDelete

It would be great if you can help share these free resources