already hostas welcome back in in this video I am going to teach you guys have
designed layout using the grid system in bootstrap now a grid as we know is made
up a bunch of rows left and right and columns up and down now whenever we use
bootstrap we can have a maximum of twelve columns
now this doesn't mean that every single web page that we make it has to be 12
columns and you know look like a big grid we can actually take these twelve
columns and if we just want one big one
we can just group them all together and also let's say that you just wanted to
have a sidebar on the left hand side in your main area while we can like take
two of those columns group them together put them on the left and we can take the
10 other ones and use them for the main content right here but remember 12
it's our magic number now another thing i want to point out in this is the last
terminology that I'm going to throw you guys before you start actually getting
hands-on whenever we're using our grid system has four different classes let me
just take all these out XS sm md and LG so extra small small medium and large
that's what they stand for
and these relate to what device are you trying to design your website for so
extra small is for phones smallest for tablets medium is for normal desktops
and laptops and large is for larger desktops like those huge imax now later
on what we're going to be doing is let's say that you want to create a layout
that i don't know let's say a desktop you want to have a layout that the
sidebar only takes up two columns but for a tablet you think it looks better
if you know your sidebar takes up four columns you can actually use these
classes to change it but in these first couple examples and for the most of my
tutorials
I'm just going to make one generic website that's responsive to every
single device
so we can just use say
like md and i'm going to show you how to make a website that looks good on every
you know single device 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 I will say that we're making a really simple web
page and it's going to have three columns and it's going to take up the
entire width of the screen
so how would we do that well remember the first thing we need to do is change
from container which is a fixed with two container fluid
now remember that is going to give us the functionality to take up the entire
width of the screen and also let me add a header so heading 1 i'll just say arm
three-column layout
now whenever you make columns they have to go inside
Rose so div and the class for this is just a row
so now inside this row we're just going to stick three columns and remember
since we have to take up 12 columns and we only want three of them
we're going to have each of those take up four columns so 4 plus 4 plus 4 is 12
simple enough so div class equals co l
- md center is just going to make this a generic you know a website for a desktop
and then - 4:00
so we're just making a regular column that's going to span four columns
i know i use the word columns a lot but that's what it's doing is taking up the
width of 4 columns and just so we can differentiate these I'm just gonna
change the background color of each one will be easier to see in this little
demo so background color got to find a shortcut too lazy to type it and what's
a good color so FF
I don't know like 999 and this one can just say first
so let me copy this and just added two more times
alright so this is going to be the first column on the left hand side this one is
going to be the one in the middle
so actually just right left middle and right and let me just change the color
- I don't know 99 c c FF and uh what else is a good color 00 CC 99
let me run this check it out
alright so there you go here is our heading right here and remember since we
use a fluid container it's taking up the entire screen so left middle right this
is all one row with three columns and check out what happens whenever I shrink
this huh that's pretty handy
I mean we didn't add any functionality so it you know all stacked on top of
each other but I mean a phone is about that sighs let's say everything is all
there nothing it squish this middle and right section are getting cut off the
start they are still right there and check that out pretty awesome a in a
real quick let me show you guys what it looks like if it is a regular container
instead of fluid so let me run this and check it out
so here is our fluid one and we can see that this takes up the full width of the
screen
no space on the left or right and this is the regular container you see that we
now have fixed width and we have some spacing on the left and right so full
screen
not full screen that's a difference in that is how you use the grid system to
make a really simple layout