bootstrap 3 nested columns
bootstrap nested columns example
twitter bootstrap 3 nested grid
bootstrap 3 nested grid example
bootstrap nested grid system
nesting bootstrap columns
bootstrap half column width
nesting columns bootstrap 3
twitter bootstrap 3 nested rows
bootstrap grid nested rows
bootstrap grid system nested
bootstrap divide column
bootstrap split column
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 with nested rows
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]
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]
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
