re: houses welcome back in in this video I am gonna teach you guys have designed
layouts
using the grid system in bootstrap now agreed as we know is made up a bunch
arose
what the Iranian columns up and down
now whenever we use bootstrap we can have a maximum of 12
columns now this doesn't mean that
every single webpage to make has to be twelve columns and you know look like a
big red
we can actually take the stove columns in if we just want one big one
religious group Amada gether and also let's say that you just wanted to have a
sidebar
on left hand side in your main area well we can like take to those columns
grouping together among the left in we can take the 10 other ones in Houston
for the main content right here but remember 12
it's our magic number now another thing I one point now
in this is the last terminology that I'm gonna throw you guys before you start
actually getting hands-on whenever using a grid system has four
different classes let me just type of these out excess as
am MD an LG
so excuse my small medium and large us for the stand for
and these relate to what device
are you trying to design your website for so exercise most for phones
small is for tablets medium is for normal desktops and laptops
and March is for larger desktops like those huge IMAX
now later on what we're gonna be doing is
let's say that you want to create a layout thats
I don't know let's say a desktop you 1 have left at the side bar only takes up
two columns
but for a tablet you think it looks better if you now
your cyber takes up four columns you can actually use these classes to change it
but in these first couple examples and for the most much twirls
I miss can make one generic website that's responsive to every
single device so we can just use say
like MD in I'm gonna show you how to make Wesley that looks good on
every you know soon advice whether it's a phone or you know a big jumbo desktop
so let's get into that right now so
let's say that we what can we do in this video
will say that we're making a really simple web page and its can have
three columns and this can take up the entire with
up the street so how would we do that well over 100 first thing we need to do
is change is from container
which is affixed with to container fluid
now remembered that is going to give us the functionality you take up the entire
with the screen
also let me add a headers so having one I just say arm
3 column layout now whenever you make columns
they have to go inside rose so div
in the class for this just row
so now inside this row we're just gonna stick
three columns and remember sense we have to take up
twelve columns and we only 13 from we're gonna have
each those take up 4 column so for plus for
was for is 12 simple enough so div
class equal Ceol minus
MD center just gonna make this a generic
you know our website for desktop and then minus
4 so we're just making a regular column
that's gonna span 4 columns
and I use the work columns lot but that's what it's doing is taking up the
with a four columns
and just so we can differentiate these just gonna change the background color
beach one
will be easier to see in this little demo so background
color got from a shortcut to lazy to type it
and what's a good color so FF
I don't like 9999 in this one can just say first
so let me copy this is added two more times
RA so this is going to be the first column on left hand side this one's
going to be the one in middle
so actually just read left middle
your age and was changed color
to no 990 CFS in no
else is a good color 00 CC
99 minor on this check it out are eight so there you go here
is are heading ray here in a member since we use a fluid
container it's taking up the entire screen so
left middle rate this is all one row with three columns
and check out what happens whenever a shirt this hom
that's pretty handy I mean we can add any functionality so it
you know all stacked on top of each other but
I mean phone is about that size let's say
everything is all there nothing it's squish
this middle and right section are getting cut off the star
their story there and
check that out pretty awesome a
in real quick let me show you guys what it looks like
if it's is a regular container instead of fluid
slimy run this and check it out so
here is our fluid one and we can see that this takes up the full with dove
the screen
no space on the left or right and this is the regular container you see that we
now have fixed with
in we have some spacing on the left interact
so fullscreen not full screen
that's a difference in that is how you use the grid system
to make a really simple layout