1
00:00:00,390 --> 00:00:05,640
Welcome back in this lesson we'll continue working with the bootstrap grid in particular there are two

2
00:00:05,640 --> 00:00:07,550
main features I want to highlight.

3
00:00:07,590 --> 00:00:12,070
The first is that I want to address the four different sizes that I briefly mentioned.

4
00:00:12,150 --> 00:00:16,950
We've been working with column Elgie haven't talked about what that means and there are three other

5
00:00:16,950 --> 00:00:18,530
sizes this will work with.

6
00:00:18,600 --> 00:00:24,270
They also want to show you how we can nest grids inside of other grids to further divide those 12 units

7
00:00:24,270 --> 00:00:25,820
up into smaller pieces.

8
00:00:26,250 --> 00:00:31,200
But start though by talking about the four sizes I'm going to start by going back to the browser and

9
00:00:31,200 --> 00:00:34,100
taking a look at the demo that we built in the last lesson.

10
00:00:34,290 --> 00:00:41,700
So we have two rows one that has 12 columns one that has three going across and watch what happens as

11
00:00:41,700 --> 00:00:48,660
I resize the window things scale just fine and then we hit a break point right here where everything

12
00:00:48,660 --> 00:00:50,810
changes in each column.

13
00:00:50,850 --> 00:00:57,420
Now takes up a full 12 units going across and they stack on top of one another and as they keep resizing

14
00:00:57,420 --> 00:00:59,400
you won't notice any changes really.

15
00:00:59,460 --> 00:01:03,140
They all continue to take up 12 units and stack on top of one another.

16
00:01:03,330 --> 00:01:08,620
But there are actually four different sizes that we can specify so we can have four different layouts

17
00:01:08,650 --> 00:01:08,980
.

18
00:01:09,030 --> 00:01:13,850
Right now this is a mobile layout which is extra small access.

19
00:01:14,040 --> 00:01:20,730
Then we get too small which is like a tablet lay out and then medium which is right here.

20
00:01:20,730 --> 00:01:26,590
This would be on a laptop or a smaller browser window and then large which we have right here.

21
00:01:26,940 --> 00:01:31,340
So it doesn't look like there's much of a difference except right here when we go between being even

22
00:01:31,350 --> 00:01:31,870
large.

23
00:01:31,980 --> 00:01:38,330
But there are four sizes and we can specify ratios and proportions for each one of those sizes.

24
00:01:38,460 --> 00:01:44,850
So on the bootstrap docks under the grid options here grid system you can see there's a table and it

25
00:01:44,850 --> 00:01:46,900
shows us the four different sizes.

26
00:01:47,130 --> 00:01:53,220
So there's extra small devices like phones than small devices which are tablet medium devices desktops

27
00:01:53,400 --> 00:01:59,190
large devices or bigger desktops that are greater than twelve hundred pixels wide and they each have

28
00:01:59,190 --> 00:02:02,940
a prefix that we can use so column access is actually small.

29
00:02:03,000 --> 00:02:08,630
S.M. is small M.D. is medium and LG is large which is what we've been using.

30
00:02:09,030 --> 00:02:14,170
So let's say that I want my layout to stay the same at the large breakpoint.

31
00:02:14,340 --> 00:02:22,020
And then when we switch to medium right here I want these 12 columns that each take up a single unit

32
00:02:22,040 --> 00:02:22,410
.

33
00:02:22,800 --> 00:02:25,320
I want them each to take up two units instead.

34
00:02:25,320 --> 00:02:27,670
So we'll end up with six going across.

35
00:02:27,690 --> 00:02:29,510
And then a further 6 below.

36
00:02:29,820 --> 00:02:32,880
So let's focus on that and to simplify things.

37
00:02:33,100 --> 00:02:36,360
I'll actually get rid of our second row for now.

38
00:02:36,600 --> 00:02:39,170
So all that we have is this right here.

39
00:02:39,210 --> 00:02:43,730
So when we hit this medium breakpoint right there I don't want this to happen.

40
00:02:43,740 --> 00:02:48,510
Instead I want six columns going across to do that.

41
00:02:48,510 --> 00:02:50,740
I just add in another class.

42
00:02:50,940 --> 00:02:58,120
So I'll do that to each one and it's going to be column medium.

43
00:02:58,200 --> 00:03:05,600
So when this grid is set the medium size we want them each to take up two units and we'll save.

44
00:03:05,640 --> 00:03:07,200
Now let's go and refresh.

45
00:03:07,380 --> 00:03:09,120
Make it full size.

46
00:03:09,120 --> 00:03:12,380
Nothing changes because we're at the large size.

47
00:03:12,570 --> 00:03:16,190
But now when I switch to medium right here.

48
00:03:16,200 --> 00:03:21,380
Notice that they each take up two units now and we get six going across.

49
00:03:21,630 --> 00:03:28,230
And if I keep shrinking it down we then hit the small breakpoint and that's where it switches where

50
00:03:28,230 --> 00:03:33,480
each column now goes all the way across full 12 units and they stack on top of one another.

51
00:03:33,900 --> 00:03:41,040
So let's go back and read let's go back to our sublime and revive our old grid.

52
00:03:41,130 --> 00:03:46,410
So we'll get rid of this one because it's not that common to actually have 12 different components going

53
00:03:46,410 --> 00:03:47,160
across.

54
00:03:47,160 --> 00:03:53,300
Usually you're working with three or four sometimes six but 12 individual columns is pretty rare.

55
00:03:53,400 --> 00:03:59,550
So let's go back to this one and what we'll do is try and recreate that grid play out of the Olafur

56
00:03:59,550 --> 00:04:01,250
Arnold's tour schedule here.

57
00:04:01,590 --> 00:04:04,200
So it starts at four going across.

58
00:04:04,200 --> 00:04:05,400
Then we shrink down.

59
00:04:05,550 --> 00:04:12,060
There's a medium break point and we're still at four and then we get to the small break point and we

60
00:04:12,060 --> 00:04:13,100
go to two across.

61
00:04:13,140 --> 00:04:15,580
And then mobile x or small is one.

62
00:04:15,990 --> 00:04:20,530
So that's what we'll try and recreate not the content just the structure.

63
00:04:20,790 --> 00:04:22,080
So we'll go back here.

64
00:04:22,650 --> 00:04:25,740
And we want to start with four going across.

65
00:04:25,740 --> 00:04:31,860
Which means that each one takes up three units and then we can change the text here.

66
00:04:31,860 --> 00:04:35,510
And let's just have it say to or date.

67
00:04:35,610 --> 00:04:43,470
So if we were fresh We should have four columns going across which we do which is exactly what this

68
00:04:43,470 --> 00:04:46,320
starts out as four going across.

69
00:04:46,320 --> 00:04:48,720
And the only difference really is the actual content.

70
00:04:48,720 --> 00:04:55,650
So instead of each column we would just add an H three a paragraph a button and whatever other content

71
00:04:55,650 --> 00:05:00,190
we need a little H.R. it looks like and we'd still get the same spacing.

72
00:05:00,600 --> 00:05:01,200
All right.

73
00:05:01,200 --> 00:05:03,790
So the next break point is when we get to medium.

74
00:05:03,960 --> 00:05:05,840
It stays at four.

75
00:05:06,300 --> 00:05:12,570
So what you might think that we need to do is specify the medium break point so when we hit this they

76
00:05:12,570 --> 00:05:15,440
should still each take up three units.

77
00:05:15,600 --> 00:05:26,810
We can go back to sublime and add that and again call them medium three and save and they each start

78
00:05:26,840 --> 00:05:33,300
at three units we hit medium and they stay at three units and then we head small and now they're 12

79
00:05:33,290 --> 00:05:34,190
units again.

80
00:05:34,310 --> 00:05:42,610
And what we want for following this is that when we hit the small size they now each take up six units

81
00:05:43,400 --> 00:05:49,140
so we can go in here and add that in column small 6.

82
00:05:49,400 --> 00:05:57,070
So the large size each one of these takes up 25 percent three units out of 12 at the medium size.

83
00:05:57,120 --> 00:05:57,920
Same thing.

84
00:05:58,010 --> 00:06:04,730
They take up 25 percent and then at the small size which is for tablets they each then take up 50 percent

85
00:06:04,730 --> 00:06:05,480
.

86
00:06:05,480 --> 00:06:12,980
So let's refresh each take up three minutes and then three units then we hit small.

87
00:06:13,040 --> 00:06:17,880
And now they each take up six units and then we had extra small.

88
00:06:17,940 --> 00:06:21,620
Then they automatically take up the full 12 units which is what we want.

89
00:06:21,810 --> 00:06:27,350
You can see when we hit small we want them to take up one unit going across.

90
00:06:27,380 --> 00:06:28,010
All right.

91
00:06:28,010 --> 00:06:33,240
So we have that down there is a small change we can make if we go back to sublime.

92
00:06:33,770 --> 00:06:39,560
You'll see that we're specifying this three units twice for the large and medium.

93
00:06:39,560 --> 00:06:46,700
We can actually get rid of column large three and just put medium in there and bootstrap will know that

94
00:06:46,740 --> 00:06:51,650
because we're setting the medium to be three and we're not explicitly setting the large it will just

95
00:06:51,650 --> 00:06:54,320
take what we set for medium and apply it to large.

96
00:06:54,440 --> 00:06:55,880
So it works the same way.

97
00:06:55,880 --> 00:06:56,650
Nothing has changed.

98
00:06:56,660 --> 00:07:02,420
I already refreshed looks identical our medium breakpoint is still there and our small works.

99
00:07:02,420 --> 00:07:04,800
So we don't have to specify that twice.

100
00:07:05,300 --> 00:07:10,460
So just let me come N.Z. we got rid of that and it works exactly the same way.

101
00:07:10,520 --> 00:07:14,990
And in fact if we take a look we go to the Web site.

102
00:07:15,000 --> 00:07:19,770
I bet that if we inspect each of these you'll see there we go.

103
00:07:19,780 --> 00:07:22,590
Column small six column medium three.

104
00:07:22,790 --> 00:07:26,990
Exactly what we had now that we've covered those four different sizes.

105
00:07:27,070 --> 00:07:30,710
Hopefully you can see how versatile and useful the grid system can be.

106
00:07:30,750 --> 00:07:31,520
Let's go back.

107
00:07:31,740 --> 00:07:33,960
And now I'll address nesting grids.

108
00:07:34,310 --> 00:07:40,130
Let's suppose that instead of this first column here I want to split it in half and have something on

109
00:07:40,130 --> 00:07:42,710
the left side of that and something on the right side.

110
00:07:42,800 --> 00:07:47,340
I can actually go and add in another row inside of there.

111
00:07:47,370 --> 00:07:49,230
So class equals row.

112
00:07:49,740 --> 00:07:56,300
And then inside of that row I can add in a div with class equal to column and all just too large for

113
00:07:56,300 --> 00:08:06,620
now column large six and another one column large 6 and I'll just write some text here half way and

114
00:08:06,710 --> 00:08:09,100
other half.

115
00:08:09,360 --> 00:08:18,170
Let's change it to the first half and other half and we'll save and let's give them a classic pink.

116
00:08:18,200 --> 00:08:24,000
So what we've done now is we'll have three going across still or four going across.

117
00:08:24,000 --> 00:08:30,290
One two three four and in the first one we've split it into a further 12 units by adding another row

118
00:08:30,290 --> 00:08:35,420
in and we're using the first six to say something and we're using the second six to say something else

119
00:08:36,330 --> 00:08:38,530
save or refresh.

120
00:08:38,960 --> 00:08:41,770
There you go and make it even more obvious.

121
00:08:41,780 --> 00:08:43,280
Let me give them another class.

122
00:08:43,400 --> 00:08:45,170
Let's call it orange.

123
00:08:45,370 --> 00:08:46,940
Doesn't exist yet.

124
00:08:46,940 --> 00:09:00,030
And defined this appear orange and it will have background orange and we'll add in order one pixel solid

125
00:09:00,140 --> 00:09:04,870
red and then actually do dasht OK.

126
00:09:05,540 --> 00:09:10,530
Refresh you can see now we still have these four things going across.

127
00:09:10,520 --> 00:09:16,880
Each one takes up three units but we split the first one into six units and six units by adding that

128
00:09:16,880 --> 00:09:19,160
row in and you have to add the row.

129
00:09:19,160 --> 00:09:22,520
You can't just start doing this where you have a column instead of a column.

130
00:09:22,520 --> 00:09:23,980
There must be a row.

131
00:09:24,260 --> 00:09:25,520
And let's do one more.

132
00:09:25,910 --> 00:09:31,090
Let's put this last one right here into six small pieces inside.

133
00:09:31,500 --> 00:09:39,770
So we need to add a row inside of that div class equals row instead of there.

134
00:09:39,770 --> 00:09:48,770
We need another div and we'll have six of these where we have column large two each taking up two out

135
00:09:48,770 --> 00:09:50,310
of 12 units.

136
00:09:50,310 --> 00:09:58,070
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

137
00:09:58,080 --> 00:09:59,370
see them.

138
00:10:00,440 --> 00:10:01,150
OK.

139
00:10:01,640 --> 00:10:06,540
So we have four big columns going across the first one we split in half.

140
00:10:06,650 --> 00:10:12,410
The last one we split in six pieces and you can't really see anything so we didn't put any text in there

141
00:10:12,420 --> 00:10:12,710
.

142
00:10:12,920 --> 00:10:14,200
So let's go do that.

143
00:10:14,270 --> 00:10:20,100
Or rather it's actually just give a with or a height to the class orange.

144
00:10:20,100 --> 00:10:22,950
Let's make them each 50 pixels.

145
00:10:22,940 --> 00:10:29,330
And if I refresh you see that now everything that has orange that class orange takes up 50 pixels in

146
00:10:29,340 --> 00:10:29,960
height.

147
00:10:30,260 --> 00:10:37,640
So we have our two evenly divided columns and then our six evenly divided columns inside of these four

148
00:10:37,730 --> 00:10:40,880
evenly divided top level columns.

149
00:10:40,880 --> 00:10:43,700
So that's all of the important pieces of the grid system.

150
00:10:43,860 --> 00:10:46,420
In a nutshell we have 12 units in every row.

151
00:10:46,560 --> 00:10:48,300
You split them up however you like.

152
00:10:48,360 --> 00:10:56,360
There are four sizes large medium small extra small and you can reassign those 12 units at any of those

153
00:10:56,370 --> 00:10:58,900
four break points those four different sizes.

154
00:10:59,000 --> 00:11:03,050
And that's how you end up with these nice responsive layouts and generally the pattern that you see

155
00:11:03,410 --> 00:11:04,870
is that on mobile sites.

156
00:11:04,880 --> 00:11:10,700
So on the extra small size most sites will have their content just stack on top of one another like

157
00:11:10,700 --> 00:11:12,830
we would here if I shrink this down.

158
00:11:12,840 --> 00:11:18,180
This is the common layout on mobile where you don't have multiple pieces of content in the same row

159
00:11:18,180 --> 00:11:18,630
.

160
00:11:19,080 --> 00:11:19,540
OK.

161
00:11:19,700 --> 00:11:20,990
Let's go back to sublime.

162
00:11:21,090 --> 00:11:23,290
Make sure I talked about the three main objectives.

163
00:11:23,610 --> 00:11:28,160
So we talked about the purpose the point of the grid system helps us lay things out.

164
00:11:28,160 --> 00:11:29,270
It's awesome.

165
00:11:29,660 --> 00:11:31,690
Understand the four different sizes.

166
00:11:31,700 --> 00:11:36,740
Those are large medium small extra small and then right nested grids.

167
00:11:37,040 --> 00:11:42,450
And that's what we're doing here where we add a row instead of a column and then we can fill that row

168
00:11:42,600 --> 00:11:45,790
with further sub columns in the next video.

169
00:11:45,840 --> 00:11:48,650
We're going to build a simple image grid using the grid system