Bootstrap Grid System Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part three of bootstrap tutorial
in this video we'll discuss how to
create page layouts using the bootstrap
grid system one of the very important
concept that we need to understand in
bootstrap is its grid system the grid
system is used for creating page layouts
through a series of rows and columns the
grid system consists of twelve columns
as you can see here this grid system is
so flexible that you can create any page
layout that you want let's now discuss
how to create a three column layout
using the bootstrap grid system the
three column layout should be as shown
here the page should be divided into
three columns with 1 is to 4 is to 1
ratio one important thing to keep in
mind here is that if we add the 3
numbers in the ratio 1 is to 4 is to 1
the sum should be equal to 12 because
the bootstrap grid system consists of 12
columns this means if the left sidebar
column is 2 units then the main content
area should be 8 units and the right
sidebar column should be 2 units
so when we add these three numbers two
units plus 8 units plus 2 units we get
12 units bootstrap includes several grid
classes for creating layouts for
different devices like mobile phones
tablets laptops desktops etc the table
right here shows the available bootstrap
grid classes that you can use to create
create column layouts ranging from extra
small devices like mobile phones to
large devices like large desktop screens
we will discuss these different classes
in detail with examples in our next
video for now let's use this class call
- MD - star to create the three column
layout with that we want there are three
simple steps to create the three column
layout that we want first we create a
container we do this by creating a
development using the bootstrap
container class all the rows will be
within this container so let's flip to
visual studio so I'm going to create a
development and the class of this
development is going to be equal to the
bootstrap container class notice visual
studio intelligence shows us all the
available bootstrap classes this is
going to create a container for us all
the rows are going to
within this container now the next step
is to obviously create the row within
the container to do this I'm going to
create a development with its class
equal to the bootstrap row class so this
is going to give us a row the final step
is to create the three columns that we
want inside this row we do this by
creating a development and setting its
class to one of the available bootstrap
grid classes so we can use any of these
grid classes for this example I'm going
to use call - empty - star MD here
stands for medium device similarly LG
for large SM for small and excess for
extra small star here represents the
number of columns that we want this new
column that we are creating to span
across those twelve columns bootstrap
grid system for example if the column
that you are creating if you want that
to span across two columns within that
twelve column bootstrap grid system then
you use number two instead of star so
first we want to create our left sidebar
column so I'm going to use call - MD 4
medium device we can also use the other
bootstrap classes like you know XS or LG
or SM so let's use MD for this example
and I want this left sidebar column to
span across two columns within that 12
column bootstrap grid system so I'm
going to use number 2 and the content
within this development is going to be
left sidebar the next step is to create
our middle column which is going to be
our main content area and we want that
middle column to span across eight
columns within that 12 column bootstrap
grid system so I'm going to use number 8
there and finally we want to create our
right sidebar column and we want our
right sidebar column to the spanning
across two columns so I am going to
change the text here to right sidebar
call - MD - - and the content within our
middle column should be main
content-area notice when we add these
three columns together we get a sum of
twelve two plus eight plus two now the
bootstrap grid system is based on twelve
columns so since the sum is twelve these
columns will be lined up next to each
other in a single draw so let's save
these changes and let's view them in the
browser notice this is how the
developments are displayed let's apply
some custom styles to these developments
to make them look pretty to do this I'm
going to add a style sheet to a project
so let's add a new style sheet and I'm
going to name this custom Styles dot CSS
I'm going to name this custom class
custom div and we are going to define a
few styles for the developments so I'm
going to include a margin of three
pixels and I'm going to enforce a
minimum height for the development and
let's set this to 300 pixels and
background color is going to be silver
let's align the text in center and
finally let's change the font size to
large
all right so that's a custom div class
and let's include our style sheet with a
no index dot HTML I'm going to place
this just after our bootstrap CSS file
and what I'm going to do here is
actually move this content inside
another development so I'm going to nest
in another development here and the
content will be inside that development
and I'm going to apply our custom class
that we have created to this development
so the class is going to be custom div
that we have just created let's do the
same thing for the other developments as
well so I'm going to move this to
another development and the text here
let's change it to main content area and
finally let's do that for the last
column as well and here the content is
going to be right sidebar so let's save
all these changes and I'm going to
reload this page so with our custom
Styles apply this how the page looks
notice we have a three column layout
here now there are some important points
to keep in mind when working with
bootstrap grid system to create page
layouts rows must be placed within a
container for proper alignment and
padding so look at this we have our row
within a container so rows should always
be placed within a container for proper
alignment and padding we use rows to
create horizontal groups of columns so
here we have three columns within that
given row content should be placed
within columns and columns only may be
direct children of a row so all the
content should be inside a column and
the columns should only be immediate
children of a row if more than 12
columns are placed within a single row
each group of extra columns will as unit
wrap to wrap onto a new line so for
example at the moment if we add
these numbers in our to 8 and 10 we get
12 so these columns are displayed nicely
you know next to each other in a single
row but what if the sum is going to be
beyond 12 now let's look at that in
action so when I change the sum here I
mean the number to three so obviously it
is going to be greater than twelve so
what happens is this column right here
will be automatically pushed on to a new
line so when I reload this page look at
that that column wraps on to a new line
but the moment it becomes twelve you
know it comes back to the same row so
when i refresh this now it's back into
its place so keep in mind if more than
twelve columns are placed within a
single row each group of extra columns
will as one unit wrap onto a new line
grid columns are created by specifying
the number of 12 available columns you
wish to span for example to create four
equal columns we would use for call - MD
- 3 now let's create four equal columns
that is width 1 is to 1 is to 1 is to 1
ratio here is the example that we just
worked with now this is what we want to
do we want to create 4 equal columns
that is width 1 is to 1 is to 1 is to 1
ratio so our column should look like
this now to create 4 equal columns I'm
going to make each column span across 3
columns within that 12 column bootstrap
grid system so let's flip to visual
studio the first thing that I'm going to
do is make a copy of this development
and then change the class of all the
developments to call - MD - 3 let's do
that for all the developments
so now let's do it for the final element
so now with this change we should get
four developments with one is to 1 is to
1 ratio for columns now let's look at
another example is the HTML to do that
now what we want to do is create 4
columns but with 1 is to 2 is to 2 is to
1 ratio this is how the columns should
look like and to do that I'm going to
change you know the first column to 2
units the second column to 4 units the
third column also to 4 units and the
final column to 2 units let's save the
changes and when we reload this page we
should get 1 is to 2 is to 2 is to 1
ratio so using the 12 column bootstrap
grid system you can create any column
layout that you want thank you for
listening and have a great day