Bootstrap 3 grid classes Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part four of bootstrap tutorial
in this video we'll discuss bootstrap 3
grid classes and they use on this slide
you can find the list of bootstrap 3
grid classes grid classes of a given
screen size apply to that screen size
and larger unless another declaration
overrides it let's understand what we
mean by this statement with an example
so here's what we want to do we want to
create four equal columns on both medium
and large devices to achieve this I'm
going to use for developments and for
each development the class is going to
be equal to call - MD - 3 notice I'm
using three instead of star because we
want four equal columns each column
spanning across three columns within the
12 column bootstrap grid system so this
is going to give us four equal columns
not only on a medium device but also on
large device because remember grid
classes of a given screen size not only
apply to that screen size but also
larger screen size unless we have
another declaration overriding it since
we are not overriding this with call -
LT - star class we are going to get four
equal columns on a larger device as well
so I have this code already typed so
when we view this page in the browser
notice we get four equal columns now if
you look at a large device the screen
size is greater than or equal to 1200
pixels whereas for a medium device it's
between 992 and 1200 pixels now when we
look at this browser how do I know what
is the screen size well we can easily
find that out by launching browser
developer tools so I'm using Google
Chrome so I am pressing f12 to launch
the browser developer tools and look at
this as I start to resize the browser at
the moment look at that right here you
can see the screen size the first number
is the width so at the moment we are on
13 36 pixels which is within the range
of a large device so notice on a large
device also we are getting four equal
columns now when we fall to less than
1200 pixels so now at the
moment we are on you know eleven
thousand ten thousand one thousand
ninety three pixels so this is within
the range of a medium device so on a
medium device we are getting four equal
columns even on a larger device we are
getting four equal columns and that's
because remember the important point
grid classes of a given screen size
apply not only to that screen size but
also larger devices unless another
declaration overrides it now let's see
how is the behavior going to be on
smaller screen size so at the moment we
are using call - MD you know the medium
class medium device class now what is
going to happen if the screen size falls
below the medium device our screen size
so for example next to medium device you
know the immediate smaller one a small
device and for this the ranges between
768 and 992 so when the screen size
falls below the medium device range so
this is not within the screen size of a
small device notice what happened to
these columns they are stacked on top of
each other with each column spanning
across 12 column bootstrap grid system
so this is what happens on a small
device now let's say we want to change
the behavior on a large device on a
large device I don't want four equal
columns instead I want two columns with
three is to one ratio that's on a large
device but on a medium device I still
want four equal columns okay so this
class is going to give us four equal
columns on a medium device okay now I
want to override the behavior on a large
device on a large device I don't want
this to be applied so I'm going to use
call - LG - so we want the columns in
three to one ratio so for the first
column you know I'm going to make this
span across nine columns within the
bootstrap grid system and the second
column
I'm going to make it span three columns
so we get 3 is to 1 ratio let's do the
same thing for the other two columns so
the first two columns will be in the
first row and the last two columns will
be in the second row on a large device
so I'm going to save these changes and
look at this when I reload this page at
the moment we are on a large screen size
so when I reload this we get two columns
within 3 is to 1 ratio but then the
moment we fall within the range of a
medium device look at that I am getting
four equal columns so on a medium device
we are getting four equal columns on a
large device we are getting two columns
with three is to one ratio and on a
small device and smaller we are getting
you know column stacked on top of each
other with each column spanning across
12 columns within that bootstrap grid
system so here we are overriding the
behavior by using you know classes for
both medium and large device now let's
say we want to create two equal columns
on a small device at the moment what's
happening on a small device columns are
stacking on top of each other now I
don't want this behavior and a small
device I want two equal columns now to
achieve that I'm going to use call - SM
for small device and we want each column
to span across six columns within the 12
column bootstrap grid system so I'm
going to use call SM - six and let's do
that for all the four columns so the
first two columns will be in the first
row of the grid whereas the second two
columns will be in the second row of the
grid so at the moment we are on a small
device screen size look at that the
moment I reload the page we are actually
seeing two columns of equal size now as
I increase the screen size when we fall
within the range of a medium device we
get four equal columns on a large device
we get two columns with three is to one
ratio but whereas on an extra-small
device you know like a mobile phone look
at that
the
are still stacking on top of each other
however we can easily change this
behavior if we want to
by using this grid class call - XS -
star now at this point if we remove you
know all the classes except call SM - 6
you know we're only having the small
plus I mean small screen size class
except that I'm going to remove all the
other classes so when we do this you
know we get two equal columns on a small
device and larger whereas on an extra
small device the columns will be stacked
on top of each other this means with
this class alone we are going to get two
columns in our two equal columns on a
small device on a medium device and on a
large device whereas on an extra small
device
you know the columns will be stacked on
top of each other with each column
spanning across 12 columns within that
12 column bootstrap grid system because
remember by default you know the grid
classes of a given screen size applied
to that screen size and larger unless
another declaration overrides it so I'm
going to save these changes and when I
reload this at the moment we are on an
extra small screen size so the columns
are stacked on top of each other but as
I keep moving and when we fall within
the range of a small device notice what
is going to happen it is going to give
us two equal columns this is on a small
device and on a medium device again we
have two equal columns and even on a
large device we have two equal columns
so by now I believe you have understood
the use of these bootstrap 3 grid
classes with these grid classes you have
complete control over the layout of your
website on different screen sizes thank
you for listening and have a great day