Welcome back in this lesson we'll continue working with the bootstrap grid in particular there are two
main features I want to highlight.
The first is that I want to address the four different sizes that I briefly mentioned.
We've been working with column Elgie haven't talked about what that means and there are three other
sizes this will work with.
They also want to show you how we can nest grids inside of other grids to further divide those 12 units
up into smaller pieces.
But start though by talking about the four sizes I'm going to start by going back to the browser and
taking a look at the demo that we built in the last lesson.
So we have two rows one that has 12 columns one that has three going across and watch what happens as
I resize the window things scale just fine and then we hit a break point right here where everything
changes in each column.
Now takes up a full 12 units going across and they stack on top of one another and as they keep resizing
you won't notice any changes really.
They all continue to take up 12 units and stack on top of one another.
But there are actually four different sizes that we can specify so we can have four different layouts
.
Right now this is a mobile layout which is extra small access.
Then we get too small which is like a tablet lay out and then medium which is right here.
This would be on a laptop or a smaller browser window and then large which we have right here.
So it doesn't look like there's much of a difference except right here when we go between being even
large.
But there are four sizes and we can specify ratios and proportions for each one of those sizes.
So on the bootstrap docks under the grid options here grid system you can see there's a table and it
shows us the four different sizes.
So there's extra small devices like phones than small devices which are tablet medium devices desktops
large devices or bigger desktops that are greater than twelve hundred pixels wide and they each have
a prefix that we can use so column access is actually small.
S.M. is small M.D. is medium and LG is large which is what we've been using.
So let's say that I want my layout to stay the same at the large breakpoint.
And then when we switch to medium right here I want these 12 columns that each take up a single unit
.
I want them each to take up two units instead.
So we'll end up with six going across.
And then a further 6 below.
So let's focus on that and to simplify things.
I'll actually get rid of our second row for now.
So all that we have is this right here.
So when we hit this medium breakpoint right there I don't want this to happen.
Instead I want six columns going across to do that.
I just add in another class.
So I'll do that to each one and it's going to be column medium.
So when this grid is set the medium size we want them each to take up two units and we'll save.
Now let's go and refresh.
Make it full size.
Nothing changes because we're at the large size.
But now when I switch to medium right here.
Notice that they each take up two units now and we get six going across.
And if I keep shrinking it down we then hit the small breakpoint and that's where it switches where
each column now goes all the way across full 12 units and they stack on top of one another.
So let's go back and read let's go back to our sublime and revive our old grid.
So we'll get rid of this one because it's not that common to actually have 12 different components going
across.
Usually you're working with three or four sometimes six but 12 individual columns is pretty rare.
So let's go back to this one and what we'll do is try and recreate that grid play out of the Olafur
Arnold's tour schedule here.
So it starts at four going across.
Then we shrink down.
There's a medium break point and we're still at four and then we get to the small break point and we
go to two across.
And then mobile x or small is one.
So that's what we'll try and recreate not the content just the structure.
So we'll go back here.
And we want to start with four going across.
Which means that each one takes up three units and then we can change the text here.
And let's just have it say to or date.
So if we were fresh We should have four columns going across which we do which is exactly what this
starts out as four going across.
And the only difference really is the actual content.
So instead of each column we would just add an H three a paragraph a button and whatever other content
we need a little H.R. it looks like and we'd still get the same spacing.
All right.
So the next break point is when we get to medium.
It stays at four.
So what you might think that we need to do is specify the medium break point so when we hit this they
should still each take up three units.
We can go back to sublime and add that and again call them medium three and save and they each start
at three units we hit medium and they stay at three units and then we head small and now they're 12
units again.
And what we want for following this is that when we hit the small size they now each take up six units
so we can go in here and add that in column small 6.
So the large size each one of these takes up 25 percent three units out of 12 at the medium size.
Same thing.
They take up 25 percent and then at the small size which is for tablets they each then take up 50 percent
.
So let's refresh each take up three minutes and then three units then we hit small.
And now they each take up six units and then we had extra small.
Then they automatically take up the full 12 units which is what we want.
You can see when we hit small we want them to take up one unit going across.
All right.
So we have that down there is a small change we can make if we go back to sublime.
You'll see that we're specifying this three units twice for the large and medium.
We can actually get rid of column large three and just put medium in there and bootstrap will know that
because we're setting the medium to be three and we're not explicitly setting the large it will just
take what we set for medium and apply it to large.
So it works the same way.
Nothing has changed.
I already refreshed looks identical our medium breakpoint is still there and our small works.
So we don't have to specify that twice.
So just let me come N.Z. we got rid of that and it works exactly the same way.
And in fact if we take a look we go to the Web site.
I bet that if we inspect each of these you'll see there we go.
Column small six column medium three.
Exactly what we had now that we've covered those four different sizes.
Hopefully you can see how versatile and useful the grid system can be.
Let's go back.
And now I'll address nesting grids.
Let's suppose that instead of this first column here I want to split it in half and have something on
the left side of that and something on the right side.
I can actually go and add in another row inside of there.
So class equals row.
And then inside of that row I can add in a div with class equal to column and all just too large for
now column large six and another one column large 6 and I'll just write some text here half way and
other half.
Let's change it to the first half and other half and we'll save and let's give them a classic pink.
So what we've done now is we'll have three going across still or four going across.
One two three four and in the first one we've split it into a further 12 units by adding another row
in and we're using the first six to say something and we're using the second six to say something else
save or refresh.
There you go and make it even more obvious.
Let me give them another class.
Let's call it orange.
Doesn't exist yet.
And defined this appear orange and it will have background orange and we'll add in order one pixel solid
red and then actually do dasht OK.
Refresh you can see now we still have these four things going across.
Each one takes up three units but we split the first one into six units and six units by adding that
row in and you have to add the row.
You can't just start doing this where you have a column instead of a column.
There must be a row.
And let's do one more.
Let's put this last one right here into six small pieces inside.
So we need to add a row inside of that div class equals row instead of there.
We need another div and we'll have six of these where we have column large two each taking up two out
of 12 units.
And we want six and then we'll go on each one and let's add in that orange class just so that we can
see them.
OK.
So we have four big columns going across the first one we split in half.
The last one we split in six pieces and you can't really see anything so we didn't put any text in there
.
So let's go do that.
Or rather it's actually just give a with or a height to the class orange.
Let's make them each 50 pixels.
And if I refresh you see that now everything that has orange that class orange takes up 50 pixels in
height.
So we have our two evenly divided columns and then our six evenly divided columns inside of these four
evenly divided top level columns.
So that's all of the important pieces of the grid system.
In a nutshell we have 12 units in every row.
You split them up however you like.
There are four sizes large medium small extra small and you can reassign those 12 units at any of those
four break points those four different sizes.
And that's how you end up with these nice responsive layouts and generally the pattern that you see
is that on mobile sites.
So on the extra small size most sites will have their content just stack on top of one another like
we would here if I shrink this down.
This is the common layout on mobile where you don't have multiple pieces of content in the same row
.
OK.
Let's go back to sublime.
Make sure I talked about the three main objectives.
So we talked about the purpose the point of the grid system helps us lay things out.
It's awesome.
Understand the four different sizes.
Those are large medium small extra small and then right nested grids.
And that's what we're doing here where we add a row instead of a column and then we can fill that row
with further sub columns in the next video.
We're going to build a simple image grid using the grid system