Bootstrap nested rows and columns Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part six of bootstrap tutorial
in this video we'll discuss nested rules
and columns in bootstrap bootstrap
supports nested rows and columns
this means rows and columns can be
placed inside an existing column however
the fundamental principle is still the
same that is the number of columns in
the nested row should also add up to
twelve or fewer however keep in mind we
don't have to always use the 12
available columns let's understand
nested rows and columns with an example
let's say we want to create a layout
that looks like this within our layout
we just want a single row and within
that single row we want two columns this
our first column and this is our second
column the second column is the main
content area within our first column we
want two rows the first row for sidebar
1 and the second row for sidebar - let's
see how easy it is to achieve this by
nesting rows and columns let's now look
at the HTML required so within our
layout we want a single row so within
our container here we have a single row
and within that single row we need two
columns so here's our first column the
first column is 3 logical units wide and
here is our second column which is 9
logical units wide when we add those two
numbers together we get 12 now with our
second column we have you know a
development here baby have set the class
to main content we have not created this
class yet we'll do that in just a bit
but this is the column for main content
and this is the column for our sidebar
remember within our sidebar we want two
rows so here we are nesting two rows
inside this column and within our first
row we have another column and remember
the fundamental principle is still the
same the number of columns in the nested
row should also add up to 12 or fewer
here we are using all the 12 available
columns and this is the column for our
sidebar one and here is our second
nested row and again within this nested
where we have another column which is
twelve logical units wide and this is
the column for sidebar too
I have the same exact HTML already typed
within index dot HTML so if we view this
page in the browser this is how it looks
like that's basically because we have
not created these two style classes yet
sidebar content and main content let's
do that now
let's flip to visual studio and within
our custom styles dot CSS I am going to
change margin bottom to 10 pixels and
I'm going to change height to 150 pixels
and let's change the name of this class
to sidebar content and I'm going to make
a copy of this and let's change the name
of the class to main content and here we
want the min height to be 300 pixels
let's save the changes and reload this
page notice now the styles are applied
but we have a small problem here and
that is the height of the main content
area is not the same as our sidebar
that's basically because of the
additional 10 pixels that we have for
margin bottom so let's increase the
minimum height of the main content area
by 10 more pixels at this point when we
reload the page the height of the main
content area is the same as the height
of our sidebar now let's look at another
example of where nested rows and columns
could be really helpful let's say we
want to create a three column layout
like this and the column should be split
in this fashion the first column should
be five logical units wide that means we
are only left with seven logical units
now we want to split those seven logical
units into two equal halves 3.5 and 3.5
this is going to be a challenge if we
don't have the concept of nested rows
and columns because with an odd number
of available logical units you can
either split them into one and six or 25
three and four or you can have just one
column with all the seven logical units
wide but if we want to split it to three
point five and three point five into two
equal halves it's going to be a
challenge but with nested rules and
columns this is really easy to achieve
let's now look at the HTML required so
we want a single row with no container
so there is our single row and within
that one row we want two columns the
first column should be five logical
units wide
there we have it and the second column
should be seven logical units wide and
here it is and within our second column
notice we have got a single nested row
and inside that nested row we've got two
columns each column six logical units
wide
so we are getting 3.5 for the first
column and 3.5 for the second column
have this exact same HTML here within
the notepad so let's copy that and paste
it with our index dot HTML and the name
of the style class here is custom div so
what I'm going to do is remove this
class from there and change the name of
this class to custom div let's save our
changes and when we reload this page
notice we have three columns the first
column is five logical units and the
rest two of the columns are 3.5 and 3.5
thank you for listening and have a great
day