0
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,
1

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

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
3

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

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
5

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

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.
7

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

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,
9

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
10

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

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

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
13

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,
14

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

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
16

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
17

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,
18

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

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

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,
21

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
22

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
23

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

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,
25

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

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
27

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

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
29

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.
30

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
31

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
32

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

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 
34

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

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

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
37

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

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
39

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

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

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,
42

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

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
44

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

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

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
47

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
48

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.
49

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
50

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

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.
52

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
53

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
54

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

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

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
57

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

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
59

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

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

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.
62

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
63

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

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.
65

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
66

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

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.
68

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

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.
70

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
71

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.
72

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
73

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

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

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.
76

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 
77

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.
78

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

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.
80

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

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
82

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

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

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

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
86

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

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

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
89

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

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
91

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

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,
93

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

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
95

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

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
97

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

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
99

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

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

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.
102

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

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

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
105

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
106

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

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
108

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.
109

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
110

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

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
112

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
113

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

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,
115

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
116

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

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

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

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

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.
121

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

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

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

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

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

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
127

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
128

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

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

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
131

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
132

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

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
134

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

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
136

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

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

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

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
140

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

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
142

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

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

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
145

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

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

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

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

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.
150

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.
151

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

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
153

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
154

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

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.
156

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

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
158

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
159

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
160

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

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

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.
163

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
164

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
165

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

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
167

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
168

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

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
170

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

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
172

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

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
174

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.
175

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

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

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

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

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
180

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

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.
182

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
183

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

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

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
186

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

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

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
189

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

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

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

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
193

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

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

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

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
197

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.
198

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

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
200

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

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
202

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,
203

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
204

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,
205

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
206

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

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

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
209

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

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
211

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
212

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

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
214

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

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.
216

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

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

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
219

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
220

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

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
222

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

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

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

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

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.
227

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

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
229

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

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
231

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

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.
233

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
234

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

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.
236

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
237

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

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,
239

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
240

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
241

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

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
243

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

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

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