1
00:00:00,660 --> 00:00:05,550
Welcome back in this lesson we're going to build a small project using what we've learned so far about

2
00:00:05,550 --> 00:00:06,740
bootstrap.

3
00:00:06,770 --> 00:00:11,880
It will include a lot of the components we've been talking about including it now bar the jumbotron

4
00:00:12,390 --> 00:00:13,590
and the grid system.

5
00:00:13,920 --> 00:00:17,370
I also threw in one or two new things including the icons here.

6
00:00:17,370 --> 00:00:19,180
We haven't seen how to do those just yet.

7
00:00:19,500 --> 00:00:25,590
And also the fact that this nav bar as I scroll it will see it stays fixed to the top so it doesn't

8
00:00:25,590 --> 00:00:30,360
scroll the way we have a fixed nav bar which we also haven't seen just yet.

9
00:00:30,360 --> 00:00:34,800
And then lastly we're changing some of the colors of the default bootstrapped components.

10
00:00:34,800 --> 00:00:37,290
So this is actually a slightly different shade of gray.

11
00:00:37,380 --> 00:00:40,480
This is the shade of blue and the nav bar has some different colors.

12
00:00:40,560 --> 00:00:44,250
So I'll be showing you how to do all of that before we get started writing any code.

13
00:00:44,320 --> 00:00:49,420
Just want to take a moment to point out the fact that these images for the most part are from a Web

14
00:00:49,420 --> 00:00:52,620
site a great resource called Splash.

15
00:00:52,920 --> 00:00:57,640
So splash provides a bunch of beautiful high rez photos that you can do whatever you want with.

16
00:00:57,750 --> 00:01:00,630
You can read the license here but it's pretty much whatever you want.

17
00:01:00,630 --> 00:01:05,610
It's a creative commons license blah blah blah I'm sure I don't really care about that but the photos

18
00:01:05,610 --> 00:01:09,390
are really awesome and I'm using a lot of these eight of them.

19
00:01:09,390 --> 00:01:11,450
In fact in our gallery.

20
00:01:11,790 --> 00:01:17,280
And that leaves one image which is this one right here that I actually took myself over taken a photography

21
00:01:17,280 --> 00:01:21,090
class and this is the first thing I've taken that looks half decent.

22
00:01:21,090 --> 00:01:24,780
I think even though compared to these ones not looking so hot.

23
00:01:24,780 --> 00:01:28,650
Anyway if you want to use these exact same images which is not important.

24
00:01:28,740 --> 00:01:30,430
This will work with any images at all.

25
00:01:30,450 --> 00:01:36,180
But if you want the exact same ones I've included all of the links in this file gallery M.D that have

26
00:01:36,210 --> 00:01:41,310
uploaded along with this video and have also included the two colors that we're going to use the dark

27
00:01:41,310 --> 00:01:42,570
blue and the light gray.

28
00:01:42,740 --> 00:01:42,990
OK.

29
00:01:42,990 --> 00:01:46,790
So with all of that out of the way let's now get started on the project.

30
00:01:47,100 --> 00:01:48,740
So I have an empty file gallery.

31
00:01:48,750 --> 00:01:49,620
H m l.

32
00:01:49,860 --> 00:01:56,400
I'll add in my h d m l skeleton here and we'll just call this image gallery and the first thing we need

33
00:01:56,400 --> 00:01:58,670
to do is include bootstrap.

34
00:01:58,800 --> 00:02:06,490
And I'm just going to copy over the CD ends from an old project so I'll do that right now.

35
00:02:06,900 --> 00:02:07,640
Here we go.

36
00:02:07,710 --> 00:02:09,830
I'm linking to the bootstrap CDN.

37
00:02:10,200 --> 00:02:18,300
And while I'm here I will also grab the bootstraps CSSA and Jay queery city and that we did in the nav

38
00:02:18,300 --> 00:02:23,580
bar lesson and put those at the bottom here so that when we add the nav bar in we don't have to go hunt

39
00:02:23,580 --> 00:02:25,990
for these files or for the script tags.

40
00:02:26,250 --> 00:02:30,250
So a save and the first thing that we can do is add in our Jumbotron.

41
00:02:30,510 --> 00:02:32,160
That's nice and easy.

42
00:02:32,400 --> 00:02:38,470
So we'll have a div and that will be class equals Jumbotron.

43
00:02:38,880 --> 00:02:47,520
And then inside the Jumbotron will start with an H1 that just says the image gallery.

44
00:02:47,670 --> 00:02:51,420
There we go and we'll save and let's make sure this works.

45
00:02:51,720 --> 00:02:53,660
So it will open up this file.

46
00:02:54,060 --> 00:02:55,330
So we have Boucek included.

47
00:02:55,350 --> 00:02:56,780
We're seeing the font change.

48
00:02:56,820 --> 00:02:58,980
We're seeing this gray from the Jumbotron.

49
00:02:58,980 --> 00:03:04,560
Let's now make sure that it's inside a container like it is here rather than what we have where it just

50
00:03:04,560 --> 00:03:07,040
goes all the way across the screen.

51
00:03:07,320 --> 00:03:12,850
So we'll do that div class equals container.

52
00:03:14,010 --> 00:03:21,900
There we go and let's do this properly and refresh and we'll go back.

53
00:03:21,900 --> 00:03:25,140
All right so we have the Jumbotron but add in this paragraph.

54
00:03:25,140 --> 00:03:33,080
Now we'll come back and do the icon but that's just a paragraph tag beneath the H-1 we'll save.

55
00:03:33,090 --> 00:03:38,040
Feel free to put whatever text you want there and we're done with the Jumbotron for now.

56
00:03:38,730 --> 00:03:43,950
So let's go back and let's now do the nav bar and I'm not going to type enough bar from scratch for

57
00:03:43,950 --> 00:03:45,190
two reasons.

58
00:03:45,210 --> 00:03:46,970
One is that it's quite a bit of code.

59
00:03:47,010 --> 00:03:48,000
It will take a long time.

60
00:03:48,010 --> 00:03:48,840
And this video.

61
00:03:48,960 --> 00:03:52,870
But two is the fact that I almost never type in Ackbar from scratch.

62
00:03:53,220 --> 00:03:58,800
As I mentioned in the NASCAR video most of the time my workflow is that I go to the bootstrap site or

63
00:03:58,800 --> 00:04:02,580
to a previous site that I've made with an NAV bar and I copy that.

64
00:04:02,580 --> 00:04:04,990
And I just checked it and I get rid of the pieces that I don't want.

65
00:04:05,010 --> 00:04:06,530
I add some new pieces in.

66
00:04:06,570 --> 00:04:08,020
So that's where I'm going to do here.

67
00:04:08,160 --> 00:04:14,160
I already have enough part that I did in the nav bar said each HTML application.

68
00:04:14,280 --> 00:04:19,570
It's right here and I'm just going to copy that in and then we'll tweak it a little bit.

69
00:04:19,620 --> 00:04:26,940
So let's copy it in and I'll go back and we'll just put this at the very top of the file just like that

70
00:04:26,940 --> 00:04:27,220
.

71
00:04:27,330 --> 00:04:32,770
And let's see what we get are fresh and we have the nav bar.

72
00:04:33,030 --> 00:04:34,010
It's close.

73
00:04:34,050 --> 00:04:36,410
We want to change the brand here.

74
00:04:36,420 --> 00:04:40,740
We also want to change the color eventually and we want to make sure that it's fixed to the top which

75
00:04:40,760 --> 00:04:43,020
it isn't right now but we'll get there.

76
00:04:43,290 --> 00:04:45,500
Let's go back and just change the brand.

77
00:04:45,690 --> 00:04:49,980
So instead of coffee I called mine images you can call this whatever you want.

78
00:04:49,980 --> 00:04:53,970
Of course make sure that it works ok.

79
00:04:54,250 --> 00:05:00,490
The next thing I'll show you is a quick change we can make to alter the color where appear instead of

80
00:05:00,490 --> 00:05:01,690
nap or default.

81
00:05:01,700 --> 00:05:06,880
We can do now if bar in verse and I'll show you what that looks like.

82
00:05:06,880 --> 00:05:11,770
We get a dark now for now or the colors have been inverted where the text is light and we get a dark

83
00:05:11,770 --> 00:05:12,500
background.

84
00:05:12,750 --> 00:05:15,660
It's still not the blue color that I'm going for over here.

85
00:05:16,030 --> 00:05:19,740
And the font is also not white but we'll come back and fix that.

86
00:05:19,750 --> 00:05:21,650
This is close enough for now.

87
00:05:21,670 --> 00:05:26,100
Now we can focus on the actual image gallery on that grid down here.

88
00:05:26,350 --> 00:05:29,640
And let's start by looking at how it behaves on the solution.

89
00:05:29,860 --> 00:05:39,160
So it starts with three images going across and then as I resize it goes down to two and then it goes

90
00:05:39,160 --> 00:05:44,480
down to two and then finally at the small size it goes to one as you can see here.

91
00:05:44,720 --> 00:05:47,110
And we have one image going across.

92
00:05:47,500 --> 00:05:52,780
Let's begin by setting up the grid for this large size where we have three going across.

93
00:05:52,780 --> 00:05:54,850
Remember we have 12 units total.

94
00:05:54,910 --> 00:05:59,730
So if we want three going across we're going to designate each of them as four units.

95
00:06:00,160 --> 00:06:04,420
So let's set that up just below our Jumbotron.

96
00:06:04,420 --> 00:06:13,900
Still inside the container though we'll just do div class equals row and then inside of that we'll have

97
00:06:13,900 --> 00:06:17,680
div class equals and we want it to be four units.

98
00:06:17,770 --> 00:06:27,120
So we'll do column large dash 4 and hit enter and we can start by just putting some text here and then

99
00:06:27,120 --> 00:06:30,260
I'll duplicate that because we want three of those.

100
00:06:30,430 --> 00:06:35,170
And I won't worry about fixing the indentation yet because we're going to make a bigger change in just

101
00:06:35,170 --> 00:06:35,770
a moment.

102
00:06:36,100 --> 00:06:40,170
But let's refresh and we get those three columns going across.

103
00:06:40,180 --> 00:06:47,050
So the next thing that we want to do is get some images going and all start but just taking the L of

104
00:06:47,050 --> 00:06:52,860
my Golden Gate Bridge photo and we're going to add an image tag rather than text.

105
00:06:52,910 --> 00:07:00,820
So image source equals that the Golden Gate Bridge you are ill and I'll just paste that three times

106
00:07:01,210 --> 00:07:02,620
and save.

107
00:07:02,620 --> 00:07:09,430
And if we go back we have a problem which is that that image is huge even though we have those three

108
00:07:09,430 --> 00:07:10,310
columns.

109
00:07:10,360 --> 00:07:14,010
Our image isn't staying inside of our column it's not shrinking down.

110
00:07:14,010 --> 00:07:19,010
You can see what we'll do to fix this is add adding a little bit more bootstrap.

111
00:07:19,030 --> 00:07:24,670
I haven't showed you yet to create this nice little border around it and it's called a thumbnail.

112
00:07:24,700 --> 00:07:29,520
All we need to do is write a div with class equal to thumbnail and then whatever image we put inside

113
00:07:29,530 --> 00:07:33,250
of it will be scaled down to fit inside the column.

114
00:07:33,250 --> 00:07:37,090
And it also gets this little border here which I think looks pretty nice.

115
00:07:37,090 --> 00:07:43,720
So to do that I'm actually going to get rid of what we have with those to just go back to one single

116
00:07:43,720 --> 00:07:52,600
image and add in a div class equals thumbnail and done that properly.

117
00:07:52,930 --> 00:07:57,880
And we wrap that around the image and save.

118
00:07:57,880 --> 00:08:00,350
Now if we refresh.

119
00:08:01,150 --> 00:08:06,470
You'll see if we get a single image that takes up the appropriate amount of space inside that grid.

120
00:08:06,730 --> 00:08:11,710
This is the column and it has a little border around it and the image isn't gigantic which is great

121
00:08:11,720 --> 00:08:12,200
.

122
00:08:12,700 --> 00:08:15,980
So let's make sure it works if we duplicate this.

123
00:08:16,060 --> 00:08:22,430
So this is one image let's duplicate it three times and see what happens refresh.

124
00:08:22,780 --> 00:08:23,610
And there we go.

125
00:08:23,710 --> 00:08:25,380
We have three images.

126
00:08:25,380 --> 00:08:27,290
I'll go ahead and add six more in.

127
00:08:27,360 --> 00:08:29,790
So we have nine total like we do here.

128
00:08:30,490 --> 00:08:32,830
And we actually don't have to add separate rows.

129
00:08:33,040 --> 00:08:35,110
We can just put them all in the same row.

130
00:08:35,200 --> 00:08:40,420
So copy all three that we have so far to times and save.

131
00:08:40,480 --> 00:08:42,730
That will give us nine images.

132
00:08:42,730 --> 00:08:46,950
And if I refresh you'll see that they automatically wrap to the next line.

133
00:08:47,230 --> 00:08:52,390
So we only have to have one row and add in those columns you know medically nos.

134
00:08:52,480 --> 00:08:57,820
If we want each image to take up four units then that means three per row and then we need three rows

135
00:08:57,820 --> 00:08:58,720
of images.

136
00:08:58,780 --> 00:09:02,150
I'll go back and change all these image you elves at the end of the video.

137
00:09:02,160 --> 00:09:03,600
I don't want to make you watch that.

138
00:09:03,630 --> 00:09:08,580
Very interesting just copying and pasting but let's focus on the rest of this grid.

139
00:09:08,580 --> 00:09:16,360
So right now as soon as a hit medium it goes to one image across which is not what we want what we're

140
00:09:16,360 --> 00:09:21,420
looking for is two images across at that medium breakpoint.

141
00:09:21,700 --> 00:09:27,940
And then after the medium break point which is there we hit small and we still want it to stay at 2

142
00:09:27,930 --> 00:09:28,730
.

143
00:09:28,750 --> 00:09:34,690
So to fix that in ours or it goes to one immediately at the large break point or the medium breakpoint

144
00:09:35,110 --> 00:09:39,310
and then small and extra small stays at 1.

145
00:09:39,460 --> 00:09:48,430
We can go back in here and we'll change all of these you know select and hit command d select all instances

146
00:09:48,880 --> 00:09:53,970
of call them large for and then I'll hit the left or right arrow to move the cursor.

147
00:09:53,990 --> 00:09:55,840
Now I can edit them all at once.

148
00:09:56,020 --> 00:10:04,240
And what I want to do I could add in column medium six because we want to Perrow and that will work

149
00:10:04,260 --> 00:10:04,350
.

150
00:10:04,410 --> 00:10:10,690
And if I go back and refresh you'll see they stay at 3 per row and then I hit the median breakpoint

151
00:10:10,720 --> 00:10:11,920
and they go to 2.

152
00:10:12,280 --> 00:10:20,820
But then I hit small and it jumps to one and to ours when we hit small the solution stays at 2.

153
00:10:20,830 --> 00:10:31,830
So to fix that rather than doing column medium six we can do column small 6 and go back again refresh

154
00:10:31,890 --> 00:10:33,390
this version.

155
00:10:33,730 --> 00:10:34,680
We hit medium.

156
00:10:34,680 --> 00:10:35,590
We go to two.

157
00:10:35,800 --> 00:10:36,750
We hit small.

158
00:10:36,760 --> 00:10:43,530
We stay at 2 and then we go to extra small and we're at 1 1 image per row.

159
00:10:43,810 --> 00:10:44,620
Perfect.

160
00:10:44,910 --> 00:10:49,060
So that's all we have to do for the grid and we're done with most of the functionality here.

161
00:10:49,170 --> 00:10:51,050
Very very quick to get that up and running.

162
00:10:51,220 --> 00:10:55,570
What we want to focus on now are some of the colors and also the icons.

163
00:10:55,870 --> 00:10:58,890
I'll start by showing you how we add icons using bootstrap.

164
00:10:59,080 --> 00:11:06,180
So on get bootstrap if you go to components there are these glyph icons up top and there's a bunch of

165
00:11:06,180 --> 00:11:07,670
them to pick from.

166
00:11:08,320 --> 00:11:11,840
And we'll find one that we want to use and the one that I'm using.

167
00:11:12,100 --> 00:11:14,710
I'll just do a search for I think it's camera.

168
00:11:14,710 --> 00:11:17,920
So there's this camera here and I'm not using that camera.

169
00:11:18,040 --> 00:11:19,310
It's slightly different.

170
00:11:19,330 --> 00:11:23,080
The one that I'm using is a more retro camera and I'll show you how to add that in.

171
00:11:23,080 --> 00:11:28,220
It's actually not part of bootstrap But let's start with the regular camera that comes with bootstrap

172
00:11:28,300 --> 00:11:28,680
.

173
00:11:28,810 --> 00:11:32,040
So we write Clifford Kahn and then go with the conn dash camera.

174
00:11:32,160 --> 00:11:38,230
And if you scroll further down you can see where they explain how to use it to create a span where a

175
00:11:38,230 --> 00:11:43,450
class is equal to with Con and then glyph it can dash the name of the glyph icon.

176
00:11:43,480 --> 00:11:49,600
So let's copy this span in and we'll start by doing it inside the H-1 just put it at the very beginning

177
00:11:49,600 --> 00:11:58,200
of the H-1 and we want an quick A-Kon dash camera and we'll save and refresh.

178
00:11:58,600 --> 00:12:01,060
And just like that you can get a camera in there.

179
00:12:01,410 --> 00:12:07,350
And if we want to space we can either do it through padding or we can just add a space right there.

180
00:12:08,260 --> 00:12:14,590
And we get a space we can do the exact same thing for the nav bar and I used one that gets called Photo

181
00:12:15,050 --> 00:12:16,970
go double check up here.

182
00:12:16,980 --> 00:12:22,780
You can do a search on this page for photo picture.

183
00:12:22,890 --> 00:12:24,080
There it is.

184
00:12:24,260 --> 00:12:26,890
It can go if it can dash picture.

185
00:12:27,730 --> 00:12:32,890
So we'll go up to the nav bar brand right here and we paste in that span again.

186
00:12:33,120 --> 00:12:41,420
And then inside the span the class should be click on picture and we'll add a space there as well.

187
00:12:41,460 --> 00:12:45,880
We go back to our site are fresh and we now have a little picture there.

188
00:12:46,360 --> 00:12:47,930
And we also have the camera.

189
00:12:48,150 --> 00:12:54,570
Next let's tackle the nav bar and we'll start by making it fixed to the top so you can see right now

190
00:12:54,580 --> 00:12:54,740
.

191
00:12:54,790 --> 00:12:56,470
That nap our scrolls away.

192
00:12:56,950 --> 00:12:59,210
But on the solution it stays there.

193
00:12:59,640 --> 00:13:04,460
And to do that it's a single class that we have to add to our NAV bar.

194
00:13:04,480 --> 00:13:11,800
So right up here we want nav bar dash fixed dash top and save.

195
00:13:12,120 --> 00:13:16,570
And if we are fresh you'll see it's fixed to the top.

196
00:13:16,570 --> 00:13:23,080
There is one small issue which is that our content is now behind it a little bit and we want it to have

197
00:13:23,230 --> 00:13:25,800
that normal spacing above the Jumbotron.

198
00:13:25,810 --> 00:13:32,770
What we need to do is add a little bit of padding to our body and it happens to be 70 pixels.

199
00:13:32,770 --> 00:13:37,720
The bootstrap docs will tell you that if you ever forget 70 pixels of padding is what we want that's

200
00:13:37,710 --> 00:13:39,320
the width of the now four.

201
00:13:39,490 --> 00:13:47,250
So we'll go here and we'll create a style sheet now and I'll call it gallery Dotsie SS and then inside

202
00:13:48,120 --> 00:13:58,300
select body padding top 70 pixels and then we need to add that in linked to that style sheet which is

203
00:13:58,410 --> 00:14:01,850
Gallery C S S.

204
00:14:01,920 --> 00:14:03,760
Now let's make sure that's working.

205
00:14:03,790 --> 00:14:04,330
There we go.

206
00:14:04,360 --> 00:14:10,860
We have our spacing back and NFR is still fixed to the top as you can see perfect