1
00:00:01,370 --> 00:00:08,120
So now that we've designed our wireframe and we're happy with the layout and the structure of our web site,

2
00:00:08,480 --> 00:00:12,760
then it's time to turn this design into the real thing.

3
00:00:12,800 --> 00:00:18,050
And in this module we're going to be focusing on how we can recreate this design by using a lot of the

4
00:00:18,050 --> 00:00:22,220
features and components in Bootstrap. And through building this web site,

5
00:00:22,220 --> 00:00:28,460
I'm going to show you all of the cool features of Bootstrap, and how you can customize it and change

6
00:00:28,460 --> 00:00:29,800
it to your needs.

7
00:00:29,990 --> 00:00:37,260
So in the coming lessons we're going to be recreating this entire page and it's design using Bootstrap.

8
00:00:37,280 --> 00:00:41,480
So the first thing I want to tackle is this navigation bar up here.

9
00:00:42,480 --> 00:00:48,840
So I want to put in a navbar at the top where we have links to the different sections of our web site,

10
00:00:49,050 --> 00:00:55,410
so that, for example, if I clicked on a company or something, it would scroll down to that section where

11
00:00:55,410 --> 00:00:56,380
it's relevant to.

12
00:00:56,580 --> 00:01:01,270
And this is usually the navigation that you see in the single page landing pages.

13
00:01:01,320 --> 00:01:07,200
And in order to put in that navigation bar, we're going to be using Bootstrap. Now, because Bootstrap is

14
00:01:07,260 --> 00:01:14,910
a library, which means that it contains reusable bits of code that we want to put into our project,

15
00:01:14,910 --> 00:01:18,390
now sometimes with libraries you might have written them yourself,

16
00:01:18,390 --> 00:01:25,710
so, for example, if you particularly liked a button that you created in CSS, then you might want to reuse

17
00:01:25,710 --> 00:01:31,860
that bit of code by putting it into a separate file and dropping it into your projects when you want

18
00:01:31,860 --> 00:01:39,550
to use it. Now, because this library is created by a third party, so it's somebody that we don't know,

19
00:01:39,990 --> 00:01:43,250
it was originally made by the team at Twitter,

20
00:01:43,410 --> 00:01:47,380
but since then it's had a large number of contributors,

21
00:01:47,520 --> 00:01:54,450
and you can actually take a look at their core team, as well as how many people contributed to this library,

22
00:01:54,510 --> 00:01:59,850
but the point is that in order to use this library that somebody else created, then we need to look at

23
00:01:59,850 --> 00:02:05,100
the documentation and we need to see what are the guidelines and what are the rules that we need to

24
00:02:05,100 --> 00:02:09,350
know about in order to use their components and their features.

25
00:02:09,360 --> 00:02:14,280
So, the first thing we're going to do is head over to Documentation, and we're going to go over to Components,

26
00:02:14,610 --> 00:02:17,330
and you’re  going to navigate to Navbar.

27
00:02:17,820 --> 00:02:23,790
And this is what we're going to add into our web site, something that looks similar to this. And we're

28
00:02:23,790 --> 00:02:28,130
first going to create it and test it out in a Code Ply playground.

29
00:02:28,170 --> 00:02:34,080
So I'm going to create a brand new one. Now, the first thing I'm going to do is to change the Bootstrap

30
00:02:34,170 --> 00:02:40,840
version from 3.3 to 4.0, so that we're up to date with the latest version.

31
00:02:40,860 --> 00:02:49,950
Now, inside HTML5 there is a element called the nav element, and this is kind of similar to a div but

32
00:02:49,950 --> 00:02:55,290
semantically it's more clear what it is that you're creating and what it is that the section of code

33
00:02:55,290 --> 00:02:55,870
does.

34
00:02:56,070 --> 00:03:01,410
So that means if somebody else comes along and they see the nav section with the nav element, then they’re 

35
00:03:01,410 --> 00:03:01,910
going to know

36
00:03:01,920 --> 00:03:05,530
this is probably going to be the code that's related to the navigation bar.

37
00:03:05,610 --> 00:03:10,230
So if I run it right now you'll see that nothing, happens because, similar to a div, if the nav doesn't

38
00:03:10,230 --> 00:03:13,080
have any content, it doesn't have any dimensions.

39
00:03:13,290 --> 00:03:19,620
So let's change that. Let’s create a new unordered list, inside which we're going to have a single list

40
00:03:19,710 --> 00:03:24,780
item, and this list item is going to be one of our menu icons.

41
00:03:24,780 --> 00:03:29,570
So maybe we'll want a contact link inside our navigation bar.

42
00:03:29,850 --> 00:03:35,010
So now, if I run the code, you can see I've just got a single bullet point that says Contact,

43
00:03:35,010 --> 00:03:39,120
and this looks nothing like a navigation bar yet.

44
00:03:39,180 --> 00:03:45,570
So we can start using the Bootstrap classes, and we're going to add those classes to our nav element

45
00:03:45,690 --> 00:03:48,890
just as they've shown here in their documentation.

46
00:03:48,900 --> 00:03:52,280
So the first one that we're going to add is the navbar.

47
00:03:52,410 --> 00:03:58,650
And if we have a look inside that bootstrap.css file that we downloaded earlier, and let's search

48
00:03:58,650 --> 00:04:09,420
for navbar, then you can see that by adding that class, then we include all of these CSS rules and apply

49
00:04:09,420 --> 00:04:15,940
it to this navigation element, and you can see what it does is that it changes the position to relative.

50
00:04:16,020 --> 00:04:21,890
It makes the content justified. It adds a little bit of padding. And it also adds some alignment and further

51
00:04:21,930 --> 00:04:23,440
positioning rules.

52
00:04:23,460 --> 00:04:28,530
Now, in addition to that, we're going to apply some other styles to the other elements inside our code.

53
00:04:28,890 --> 00:04:38,520
So we're going to change the ul to have a class of navbar-nav and the li is going to have a

54
00:04:38,520 --> 00:04:48,840
class of nav-item. And you can see that this is all from the documentation here, where you can see that

55
00:04:48,930 --> 00:04:50,420
ul has that class,

56
00:04:50,430 --> 00:04:51,570
navbar-nav,

57
00:04:51,660 --> 00:04:59,280
and the li has the class nav-item. And you can also check over here in the actual source code to

58
00:04:59,280 --> 00:05:03,090
see what applying each of these styles actually does.

59
00:05:03,240 --> 00:05:08,580
And now that we've done that let's go ahead and hit run and we can see that we've now got a completely

60
00:05:08,700 --> 00:05:14,010
different style based on those three different classes that we just added.

61
00:05:14,040 --> 00:05:19,150
Now, the text in our navbar is probably going to be a link, right?

62
00:05:19,170 --> 00:05:24,520
We want to be able to click on it and to scroll to a particular section in our web site.

63
00:05:24,690 --> 00:05:31,080
For example, Contact maybe we'll go down to the bottom where we've got icons for Twitter, Facebook, e-mail

64
00:05:31,260 --> 00:05:32,020
etc..

65
00:05:32,250 --> 00:05:38,580
So this can't just be plain text and instead we should change it into an anchor tag.

66
00:05:38,880 --> 00:05:47,400
So let's create an anchor tag that has the class of nav-link. And this will make our text look more like

67
00:05:47,400 --> 00:05:50,720
a link, so that when I hover over it, it changes color, etc..

68
00:05:50,850 --> 00:05:56,530
So we've got the class, and we need an href for this to be a valid anchor tag.

69
00:05:56,580 --> 00:05:58,430
And I'm just going to leave that empty.

70
00:05:58,710 --> 00:06:04,770
And finally I’m just going to close off the tag and add a link text called Contact.

71
00:06:04,770 --> 00:06:11,070
And now, if I run the code, you'll see that Bootstrap has styled this completely differently and that

72
00:06:11,070 --> 00:06:17,000
when I hover over it, it appears as a link by changing the color and also showing that little pointer.

73
00:06:17,010 --> 00:06:23,310
So we've managed to create a very simple navigation bar just by adding a few classes and following the

74
00:06:23,310 --> 00:06:26,550
structure that Bootstrap wants us to use.

75
00:06:26,550 --> 00:06:28,660
So let's go ahead and add a few more links.

76
00:06:28,710 --> 00:06:33,620
So I'm just going to copy these link items and paste two more in here.

77
00:06:33,840 --> 00:06:41,340
So let's say that the second one is Pricing, and the third link in our menu is just Download. And now let’s 

78
00:06:41,430 --> 00:06:48,660
run our code and you can see that the strange thing is that it's made our navigation bar vertical.

79
00:06:48,660 --> 00:06:53,190
So each navigation item is vertically stacked on top of each other.

80
00:06:53,190 --> 00:06:58,890
Now that's not really what I designed it to be. I want it to be horizontal like this.

81
00:06:58,890 --> 00:07:00,970
And also like this.

82
00:07:00,990 --> 00:07:08,940
So, in order to do that, we need a class called navbar-expand, and this will expand the navigation items

83
00:07:09,240 --> 00:07:12,770
depending on how large the screen is.

84
00:07:12,960 --> 00:07:14,840
So let me show you that by adding the code.

85
00:07:14,850 --> 00:07:19,890
So we're going to add navbar-expand and we're going to say large.

86
00:07:20,010 --> 00:07:27,290
So, when I run this code, you'll see that in the current viewport, which is kind of the desktop

87
00:07:27,360 --> 00:07:31,260
size, so laptop or desktop, where you've got quite a lot of width,

88
00:07:31,440 --> 00:07:35,580
you can see that all the links are horizontally displayed next to each other.

89
00:07:35,580 --> 00:07:44,100
Now when I go into a smaller size, say on iPad or iPhone, then it stacks vertically so that it uses more

90
00:07:44,100 --> 00:07:44,910
of the real estate

91
00:07:44,940 --> 00:07:50,910
and it's easier to see. Now, as they specify here, you can change that, whether it's large or medium or

92
00:07:50,910 --> 00:07:55,170
small, to specify at which point it should go into the vertical.

93
00:07:55,170 --> 00:08:03,000
So, for example, if I change this to medium and I run, now you can see that on a desktop, on a laptop size,

94
00:08:03,090 --> 00:08:05,610
it is horizontal, tablet size

95
00:08:05,610 --> 00:08:11,400
it’s still horizontal, but smartphone size it goes into vertical. So you can change that by just changing

96
00:08:11,430 --> 00:08:12,400
the keyword here.

97
00:08:12,510 --> 00:08:19,470
So, in my case, I'm going to stick to large, because we're going to add a dropdown menu a little bit later

98
00:08:19,470 --> 00:08:20,140
on.

99
00:08:20,160 --> 00:08:24,930
Now, the next thing I want to show you is that our navbar is not very obvious at the moment. It just looks

100
00:08:24,930 --> 00:08:26,140
like I've got three links.

101
00:08:26,160 --> 00:08:28,380
I don't actually see any sort of bar.

102
00:08:28,620 --> 00:08:36,210
Well, you can add the style of the navbar to make it look something like this by simply adding a background.

103
00:08:36,300 --> 00:08:38,570
And we're going to use background light here.

104
00:08:38,580 --> 00:08:43,640
So let's add a background light class and hit run.

105
00:08:43,750 --> 00:08:49,890
And you can see now our navbar has this light background, and it shows more clearly where the navbar is and where

106
00:08:49,890 --> 00:08:57,380
the rest of the content is. Now, in addition to that, you can change the actual style of a navbar so that

107
00:08:57,390 --> 00:08:58,910
it’s not blue.

108
00:08:58,910 --> 00:09:06,950
And we can change the navbar to have a light style, hit run, and you can see that this looks more similar

109
00:09:06,950 --> 00:09:14,120
to this, because we're using the navbar-light style of navbars, as they showed in the documentation.

110
00:09:14,150 --> 00:09:21,530
Now Bootstrap, by default, has a number of colors, and you can see it most obviously if you go into

111
00:09:21,590 --> 00:09:27,430
the Buttons documentation, and they show you all the names of the colors.

112
00:09:27,470 --> 00:09:34,520
So you've got Primary, which is blue, and that kind of comes from the Twitter days where their primary

113
00:09:34,520 --> 00:09:41,930
color was always light blue color, Secondary is grey, Success, Danger, Warning, Info, Light. So we can use

114
00:09:42,020 --> 00:09:45,170
any of these colors just by using those words.

115
00:09:45,170 --> 00:09:52,290
So, for example, if I wanted the background to be red, then I can say background danger, hit run,

116
00:09:52,400 --> 00:10:01,740
you can see it turns red. Or if I wanted it to be yellow, then I can say background warning, hit run, and I

117
00:10:01,740 --> 00:10:03,190
can change them to

118
00:10:03,240 --> 00:10:08,070
all of these colors that you see here just by using their names.

119
00:10:08,070 --> 00:10:10,750
Now, in our case I want to use a navbar-dark,

120
00:10:10,790 --> 00:10:15,630
and I want to change the background to dark as well.

121
00:10:15,630 --> 00:10:21,430
Now let's hit run, and you can see we've got this black background with a whitish navbar.

122
00:10:21,570 --> 00:10:24,120
So that style comes from these two classes.

123
00:10:24,120 --> 00:10:25,190
Now what if,

124
00:10:25,200 --> 00:10:26,530
like over here,

125
00:10:26,550 --> 00:10:31,600
I want to have a brand, say, the name of my company or the logo.

126
00:10:31,620 --> 00:10:33,130
How can I implement that?

127
00:10:33,330 --> 00:10:38,730
Well, we can read through the documentation, and you'll see that all we need to do is add a class called

128
00:10:38,730 --> 00:10:44,850
navbar-brand, and it tells you that it can be applied to most elements but an anchor tag is the best

129
00:10:44,850 --> 00:10:46,370
thing to apply it to.

130
00:10:46,560 --> 00:10:49,670
So let's go ahead and do exactly that.

131
00:10:49,680 --> 00:10:58,950
So outside of the unordered list I'm going to add a new anchor tag and it's going to have a class of

132
00:10:59,040 --> 00:11:07,140
navbar-brand, and it's going to have an href of empty string, and then I'm going to close off that

133
00:11:07,140 --> 00:11:11,100
tag and call it tindog, after our brilliant company.

134
00:11:11,220 --> 00:11:17,070
So let's hit run, and you can see that we've now got the brand which is styled slightly differently from

135
00:11:17,070 --> 00:11:19,540
the links to be able to differentiate it.

136
00:11:19,710 --> 00:11:26,490
And that and all of the styling and all of these components comes free from Bootstrap just by adding

137
00:11:26,490 --> 00:11:27,570
these classes.

138
00:11:27,720 --> 00:11:29,540
So I hope you're getting the hang of this.

139
00:11:29,610 --> 00:11:32,570
So now that I've got all the items on my navbar.

140
00:11:32,700 --> 00:11:38,700
But if we take a look at our design, we wanted the brand to be on the left, and we wanted all the links

141
00:11:38,700 --> 00:11:40,000
to be on the right,

142
00:11:40,050 --> 00:11:44,970
so there's a little bit of space between them. But in our case they're all kind of huddled together, and

143
00:11:45,000 --> 00:11:46,610
that doesn't look very nice.

144
00:11:46,620 --> 00:11:50,270
So how can we shift all of these links over to the right?

145
00:11:50,460 --> 00:11:55,860
Well first, let's first identify the container that holds all of these links. And it shouldn't be hard

146
00:11:55,860 --> 00:11:58,920
to see that that would be the unordered list.

147
00:11:59,160 --> 00:12:05,120
So that separates this group from the anchor tag which is our navbar-brand.

148
00:12:05,190 --> 00:12:09,160
Now, in order to move this unordered list over to the right,

149
00:12:09,420 --> 00:12:13,480
all we need to do again is to just add another class.

150
00:12:13,560 --> 00:12:18,760
And we're not going to need to write any CSS of our own to style this navbar.

151
00:12:19,020 --> 00:12:26,160
So what I want is, I want there to be a margin between these sets of links and our brand.

152
00:12:26,190 --> 00:12:33,710
So Bootstrap has a nice class called margin left, ml-auto.

153
00:12:34,020 --> 00:12:42,090
And if I hit run you'll see that what that class does is that it adds a margin to the left of this group

154
00:12:42,180 --> 00:12:49,230
of unordered list, and the auto means that it will add as much margin as it needs to in order to push

155
00:12:49,290 --> 00:12:53,300
this group right next to the edge of the screen.

156
00:12:53,400 --> 00:12:58,820
So this is looking a lot better and a lot closer to what we've got in our design here.

157
00:12:58,920 --> 00:13:02,880
Now there's just one thing that's not quite ideal. At the moment,

158
00:13:02,890 --> 00:13:11,670
when we go from laptop to tablet, our navigation bar changes into the vertical format. Now, wouldn't it

159
00:13:11,670 --> 00:13:19,280
be so much better if, when it gets too small to show all of these three links, to simply have a dropdown

160
00:13:19,320 --> 00:13:25,800
menu where we can see all of these links, rather than have them take up so much space in the navigation

161
00:13:25,800 --> 00:13:26,530
bar?

162
00:13:27,000 --> 00:13:28,330
Well, how would we do that?

163
00:13:28,380 --> 00:13:35,840
Let's take a look at the documentation on Bootstrap. So, we can scroll or simply select the Toggler.

164
00:13:35,880 --> 00:13:44,220
Now, what the Toggler does is that, if you watch as I reduce the size of this navigation bar, then you'll

165
00:13:44,220 --> 00:13:52,710
see that eventually it gets to a size where it's so small that it can't actually fit all of these links in

166
00:13:52,710 --> 00:13:53,810
the same line.

167
00:13:54,120 --> 00:14:01,290
Now you could either make the text smaller, or make it vertically stacked on top of each other, as we've

168
00:14:01,290 --> 00:14:08,070
got at the moment, or the more intelligent way is having this button show up, which is called a hamburger

169
00:14:08,100 --> 00:14:12,700
menu, because it looks, well somebody once thought it looks, like a hamburger.

170
00:14:12,960 --> 00:14:17,940
Personally, being a hamburger connoisseur, I think it looks nothing like a hamburger, but there's only

171
00:14:17,940 --> 00:14:19,660
so many fights you can fight.

172
00:14:19,710 --> 00:14:26,700
So let's go ahead and click on it and you can see it creates this dropdown menu where we can now view

173
00:14:26,760 --> 00:14:28,710
all of those links that are hidden.

174
00:14:28,890 --> 00:14:35,670
And this makes the design really really clean and also makes the best use of the size of the screen

175
00:14:35,970 --> 00:14:43,130
because on a mobile phone you probably don't want a bunch of tiny links bunched up in the same line.

176
00:14:43,140 --> 00:14:44,980
It'll be really really hard to read.

177
00:14:45,120 --> 00:14:48,530
And instead you want to have this nice dropdown menu.

178
00:14:48,600 --> 00:14:51,590
So how can we implement this in our code?

179
00:14:52,020 --> 00:14:53,760
Well, let's see what they did.

180
00:14:53,940 --> 00:15:00,970
They added a button, which is going to act as that hamburger menu button, and when you click on it, it's

181
00:15:00,970 --> 00:15:09,240
going to target something called navbarTogglerDemo02, which you can see is this thing here.

182
00:15:09,550 --> 00:15:18,300
So they've created a div that contains everything that is collapsable, and put it inside that div.

183
00:15:18,490 --> 00:15:25,780
And they've given it the class of collapse navbar-collapse, and given it a id that can be targeted by

184
00:15:25,810 --> 00:15:27,730
this button.

185
00:15:27,730 --> 00:15:32,220
Now let's see if we can do the same thing in our code.

186
00:15:32,260 --> 00:15:40,720
So I'm just going to straight up copy this button over to here and I'm going to put that just below

187
00:15:40,940 --> 00:15:46,570
our nav element. And the next thing I want to do is create that div.

188
00:15:46,720 --> 00:15:51,240
Now the location where you create the div is really really important.

189
00:15:51,460 --> 00:15:57,580
So first I'm going to show you what it looks like when I create the div here and I'm going to surround

190
00:15:57,670 --> 00:16:00,860
the brand as well as all of our links.

191
00:16:01,030 --> 00:16:06,210
So the div is going to have a class of collapse

192
00:16:06,370 --> 00:16:08,550
navbar-collapse.

193
00:16:09,250 --> 00:16:14,380
Now sometimes you realize that Bootstrap really could have made their class naming a little bit more

194
00:16:14,380 --> 00:16:14,910
succinct.

195
00:16:14,950 --> 00:16:19,430
You end up writing a lot of nav navbar nav navbar collapse.

196
00:16:19,540 --> 00:16:21,930
But this is just the way that Bootstrap works.

197
00:16:21,930 --> 00:16:29,110
And there are other frameworks which have more succinct names for their classes, but once you understand

198
00:16:29,110 --> 00:16:33,820
how Bootstrap works, it's quite easy to pick up any of these other front end frameworks.

199
00:16:33,820 --> 00:16:36,610
They all work in a really really similar way.

200
00:16:36,610 --> 00:16:42,760
So now we've got this div class called collapse navbar-collapse, and I'm going to put the closing div

201
00:16:43,780 --> 00:16:50,130
just after our unordered list so that the unordered list,

202
00:16:50,180 --> 00:16:58,960
so all of these three links, as well as our brand, is enclosed in the collapsable section or the collapsable

203
00:16:58,960 --> 00:17:06,180
di. And the final thing we need to add before our navbar is going to work is that we need that id,

204
00:17:06,460 --> 00:17:14,770
because the button is targeting this specific id, so it knows that when you click on this button, which

205
00:17:14,770 --> 00:17:20,890
div to collapse or uncollapse, because you could have many of these collapsable sections on the same web site,

206
00:17:21,370 --> 00:17:27,730
and you need something specific so that the code knows which parts to collapse and which parts not to

207
00:17:27,730 --> 00:17:28,380
collapse.

208
00:17:28,600 --> 00:17:31,160
So let's add that id over here.

209
00:17:32,420 --> 00:17:37,580
Now, of course, you can name your id whatever it is that you want. As long as it's the same as the data

210
00:17:37,580 --> 00:17:41,140
target in your button, then it should work just fine.

211
00:17:41,150 --> 00:17:49,040
So let's hit run, and you can see now if I switch over to the phone sized, all of the content in my navbar

212
00:17:49,040 --> 00:17:58,070
disappears, including the navbar-brand and all three of my links, because we haven't closed all of

213
00:17:58,070 --> 00:18:02,120
them inside this collapsable div.

214
00:18:02,630 --> 00:18:09,560
So now if I click on this button you will see a dropdown menu and a nice animation that shows everything

215
00:18:09,560 --> 00:18:13,190
that's contained in that collapsable area.

216
00:18:13,190 --> 00:18:22,760
So in my case I would actually rather like my brand to still show up when it is in the mobile size.

217
00:18:22,850 --> 00:18:29,270
So I'm going to take out my navbar-brand, or rather this anchor tag,

218
00:18:29,410 --> 00:18:30,570
so I'm going to cut.

219
00:18:30,590 --> 00:18:37,730
So it matters a great deal where you place that navbar-brand, because if you paste it below the button

220
00:18:38,060 --> 00:18:46,340
that is our toggle button, then when you hit run you'll see that the brand appears on the right and the

221
00:18:46,340 --> 00:18:49,160
toggle appears on the left.

222
00:18:49,160 --> 00:18:57,950
Now if you place this anchor tag for your brand above the button, however, then you hit run, and their positions

223
00:18:57,950 --> 00:18:59,210
get swapped.

224
00:18:59,240 --> 00:19:03,280
So the first thing that gets rendered is the navbar-brand,

225
00:19:03,290 --> 00:19:04,700
then we render the button.

226
00:19:04,700 --> 00:19:06,550
So this is something to be aware of.

227
00:19:06,680 --> 00:19:12,100
And in our case we actually want the brand to be on the left and the menu icons to be on the right.

228
00:19:12,140 --> 00:19:14,820
So this is the format that we're looking for.

229
00:19:14,960 --> 00:19:20,900
So now we've got this brilliant navbar, where it expands to have all the links on the right

230
00:19:21,050 --> 00:19:25,040
when it's in a large display, so a laptop or desktop,

231
00:19:25,130 --> 00:19:32,390
and when we're on a smartphone or a tablet, then it shrinks down into a toggle button, which we can show

232
00:19:32,450 --> 00:19:34,970
or unshow our navigation menu.

233
00:19:34,970 --> 00:19:39,030
Now there's a number of other things that you can do with the navigation bar.

234
00:19:39,080 --> 00:19:47,510
So, for example, you can have a dropdown link like so, just by adding the class dropdown to your list item

235
00:19:47,870 --> 00:19:49,270
and have a link

236
00:19:49,310 --> 00:19:56,020
that is the dropdown toggle, and then you have a div with all the items that will be inside the dropdown.

237
00:19:56,030 --> 00:20:02,690
So you're basically just copying this list item and modifying it to your needs to specify how you want

238
00:20:02,690 --> 00:20:04,360
your dropdown to look like.

239
00:20:04,370 --> 00:20:10,530
Now you can also affect the position of the navbar by changing it to a navbar fixed-top,

240
00:20:10,550 --> 00:20:16,460
so that means when you scroll through your web site, it will stay at that position and it won't disappear

241
00:20:16,460 --> 00:20:22,100
off the screen. Or you can have it fixed to the bottom so that you've always got it at the bottom. And

242
00:20:22,100 --> 00:20:27,100
you can just copy this code to get this positioning and placement behavior.

243
00:20:27,200 --> 00:20:33,470
Now in the next lesson we're going to be looking at the grid system and we're going to start to build

244
00:20:33,470 --> 00:20:35,480
up our TinDog web site.

245
00:20:35,660 --> 00:20:38,030
So there's a lot more fun stuff yet to come.

246
00:20:38,030 --> 00:20:40,370
And I look forward to seeing you on the next lesson.