All language subtitles for 4. The Bootstrap Navigation Bar

So now that we've designed our wireframe and we're happy with the layout and the structure of our web site,
1

then it's time to turn this design into the real thing.
2

And in this module we're going to be focusing on how we can recreate this design by using a lot of the
3

features and components in Bootstrap. And through building this web site,
4

I'm going to show you all of the cool features of Bootstrap, and how you can customize it and change
5

it to your needs.
6

So in the coming lessons we're going to be recreating this entire page and it's design using Bootstrap.
7

So the first thing I want to tackle is this navigation bar up here.
8

So I want to put in a navbar at the top where we have links to the different sections of our web site,
9

so that, for example, if I clicked on a company or something, it would scroll down to that section where
10

it's relevant to.
11

And this is usually the navigation that you see in the single page landing pages.
12

And in order to put in that navigation bar, we're going to be using Bootstrap. Now, because Bootstrap is
13

a library, which means that it contains reusable bits of code that we want to put into our project,
14

now sometimes with libraries you might have written them yourself,
15

so, for example, if you particularly liked a button that you created in CSS, then you might want to reuse
16

that bit of code by putting it into a separate file and dropping it into your projects when you want
17

to use it. Now, because this library is created by a third party, so it's somebody that we don't know,
18

it was originally made by the team at Twitter,
19

but since then it's had a large number of contributors,
20

and you can actually take a look at their core team, as well as how many people contributed to this library,
21

but the point is that in order to use this library that somebody else created, then we need to look at
22

the documentation and we need to see what are the guidelines and what are the rules that we need to
23

know about in order to use their components and their features.
24

So, the first thing we're going to do is head over to Documentation, and we're going to go over to Components,
25

and you’re going to navigate to Navbar.
26

And this is what we're going to add into our web site, something that looks similar to this. And we're
27

first going to create it and test it out in a Code Ply playground.
28

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

version from 3.3 to 4.0, so that we're up to date with the latest version.
30

Now, inside HTML5 there is a element called the nav element, and this is kind of similar to a div but
31

semantically it's more clear what it is that you're creating and what it is that the section of code
32

does.
33

So that means if somebody else comes along and they see the nav section with the nav element, then they’re
34

going to know
35

this is probably going to be the code that's related to the navigation bar.
36

So if I run it right now you'll see that nothing, happens because, similar to a div, if the nav doesn't
37

have any content, it doesn't have any dimensions.
38

So let's change that. Let’s create a new unordered list, inside which we're going to have a single list
39

item, and this list item is going to be one of our menu icons.
40

So maybe we'll want a contact link inside our navigation bar.
41

So now, if I run the code, you can see I've just got a single bullet point that says Contact,
42

and this looks nothing like a navigation bar yet.
43

So we can start using the Bootstrap classes, and we're going to add those classes to our nav element
44

just as they've shown here in their documentation.
45

So the first one that we're going to add is the navbar.
46

And if we have a look inside that bootstrap.css file that we downloaded earlier, and let's search
47

for navbar, then you can see that by adding that class, then we include all of these CSS rules and apply
48

it to this navigation element, and you can see what it does is that it changes the position to relative.
49

It makes the content justified. It adds a little bit of padding. And it also adds some alignment and further
50

positioning rules.
51

Now, in addition to that, we're going to apply some other styles to the other elements inside our code.
52

So we're going to change the ul to have a class of navbar-nav and the li is going to have a
53

class of nav-item. And you can see that this is all from the documentation here, where you can see that
54

ul has that class,
55

navbar-nav,
56

and the li has the class nav-item. And you can also check over here in the actual source code to
57

see what applying each of these styles actually does.
58

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

different style based on those three different classes that we just added.
60

Now, the text in our navbar is probably going to be a link, right?
61

We want to be able to click on it and to scroll to a particular section in our web site.
62

For example, Contact maybe we'll go down to the bottom where we've got icons for Twitter, Facebook, e-mail
63

etc..
64

So this can't just be plain text and instead we should change it into an anchor tag.
65

So let's create an anchor tag that has the class of nav-link. And this will make our text look more like
66

a link, so that when I hover over it, it changes color, etc..
67

So we've got the class, and we need an href for this to be a valid anchor tag.
68

And I'm just going to leave that empty.
69

And finally I’m just going to close off the tag and add a link text called Contact.
70

And now, if I run the code, you'll see that Bootstrap has styled this completely differently and that
71

when I hover over it, it appears as a link by changing the color and also showing that little pointer.
72

So we've managed to create a very simple navigation bar just by adding a few classes and following the
73

structure that Bootstrap wants us to use.
74

So let's go ahead and add a few more links.
75

So I'm just going to copy these link items and paste two more in here.
76

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

run our code and you can see that the strange thing is that it's made our navigation bar vertical.
78

So each navigation item is vertically stacked on top of each other.
79

Now that's not really what I designed it to be. I want it to be horizontal like this.
80

And also like this.
81

So, in order to do that, we need a class called navbar-expand, and this will expand the navigation items
82

depending on how large the screen is.
83

So let me show you that by adding the code.
84

So we're going to add navbar-expand and we're going to say large.
85

So, when I run this code, you'll see that in the current viewport, which is kind of the desktop
86

size, so laptop or desktop, where you've got quite a lot of width,
87

you can see that all the links are horizontally displayed next to each other.
88

Now when I go into a smaller size, say on iPad or iPhone, then it stacks vertically so that it uses more
89

of the real estate
90

and it's easier to see. Now, as they specify here, you can change that, whether it's large or medium or
91

small, to specify at which point it should go into the vertical.
92

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

it is horizontal, tablet size
94

it’s still horizontal, but smartphone size it goes into vertical. So you can change that by just changing
95

the keyword here.
96

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

on.
98

Now, the next thing I want to show you is that our navbar is not very obvious at the moment. It just looks
99

like I've got three links.
100

I don't actually see any sort of bar.
101

Well, you can add the style of the navbar to make it look something like this by simply adding a background.
102

And we're going to use background light here.
103

So let's add a background light class and hit run.
104

And you can see now our navbar has this light background, and it shows more clearly where the navbar is and where
105

the rest of the content is. Now, in addition to that, you can change the actual style of a navbar so that
106

it’s not blue.
107

And we can change the navbar to have a light style, hit run, and you can see that this looks more similar
108

to this, because we're using the navbar-light style of navbars, as they showed in the documentation.
109

Now Bootstrap, by default, has a number of colors, and you can see it most obviously if you go into
110

the Buttons documentation, and they show you all the names of the colors.
111

So you've got Primary, which is blue, and that kind of comes from the Twitter days where their primary
112

color was always light blue color, Secondary is grey, Success, Danger, Warning, Info, Light. So we can use
113

any of these colors just by using those words.
114

So, for example, if I wanted the background to be red, then I can say background danger, hit run,
115

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

can change them to
117

all of these colors that you see here just by using their names.
118

Now, in our case I want to use a navbar-dark,
119

and I want to change the background to dark as well.
120

Now let's hit run, and you can see we've got this black background with a whitish navbar.
121

So that style comes from these two classes.
122

Now what if,
123

like over here,
124

I want to have a brand, say, the name of my company or the logo.
125

How can I implement that?
126

Well, we can read through the documentation, and you'll see that all we need to do is add a class called
127

navbar-brand, and it tells you that it can be applied to most elements but an anchor tag is the best
128

thing to apply it to.
129

So let's go ahead and do exactly that.
130

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

navbar-brand, and it's going to have an href of empty string, and then I'm going to close off that
132

tag and call it tindog, after our brilliant company.
133

So let's hit run, and you can see that we've now got the brand which is styled slightly differently from
134

the links to be able to differentiate it.
135

And that and all of the styling and all of these components comes free from Bootstrap just by adding
136

these classes.
137

So I hope you're getting the hang of this.
138

So now that I've got all the items on my navbar.
139

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

to be on the right,
141

so there's a little bit of space between them. But in our case they're all kind of huddled together, and
142

that doesn't look very nice.
143

So how can we shift all of these links over to the right?
144

Well first, let's first identify the container that holds all of these links. And it shouldn't be hard
145

to see that that would be the unordered list.
146

So that separates this group from the anchor tag which is our navbar-brand.
147

Now, in order to move this unordered list over to the right,
148

all we need to do again is to just add another class.
149

And we're not going to need to write any CSS of our own to style this navbar.
150

So what I want is, I want there to be a margin between these sets of links and our brand.
151

So Bootstrap has a nice class called margin left, ml-auto.
152

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

of unordered list, and the auto means that it will add as much margin as it needs to in order to push
154

this group right next to the edge of the screen.
155

So this is looking a lot better and a lot closer to what we've got in our design here.
156

Now there's just one thing that's not quite ideal. At the moment,
157

when we go from laptop to tablet, our navigation bar changes into the vertical format. Now, wouldn't it
158

be so much better if, when it gets too small to show all of these three links, to simply have a dropdown
159

menu where we can see all of these links, rather than have them take up so much space in the navigation
160

bar?
161

Well, how would we do that?
162

Let's take a look at the documentation on Bootstrap. So, we can scroll or simply select the Toggler.
163

Now, what the Toggler does is that, if you watch as I reduce the size of this navigation bar, then you'll
164

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

the same line.
166

Now you could either make the text smaller, or make it vertically stacked on top of each other, as we've
167

got at the moment, or the more intelligent way is having this button show up, which is called a hamburger
168

menu, because it looks, well somebody once thought it looks, like a hamburger.
169

Personally, being a hamburger connoisseur, I think it looks nothing like a hamburger, but there's only
170

so many fights you can fight.
171

So let's go ahead and click on it and you can see it creates this dropdown menu where we can now view
172

all of those links that are hidden.
173

And this makes the design really really clean and also makes the best use of the size of the screen
174

because on a mobile phone you probably don't want a bunch of tiny links bunched up in the same line.
175

It'll be really really hard to read.
176

And instead you want to have this nice dropdown menu.
177

So how can we implement this in our code?
178

Well, let's see what they did.
179

They added a button, which is going to act as that hamburger menu button, and when you click on it, it's
180

going to target something called navbarTogglerDemo02, which you can see is this thing here.
181

So they've created a div that contains everything that is collapsable, and put it inside that div.
182

And they've given it the class of collapse navbar-collapse, and given it a id that can be targeted by
183

this button.
184

Now let's see if we can do the same thing in our code.
185

So I'm just going to straight up copy this button over to here and I'm going to put that just below
186

our nav element. And the next thing I want to do is create that div.
187

Now the location where you create the div is really really important.
188

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

the brand as well as all of our links.
190

So the div is going to have a class of collapse
191

navbar-collapse.
192

Now sometimes you realize that Bootstrap really could have made their class naming a little bit more
193

succinct.
194

You end up writing a lot of nav navbar nav navbar collapse.
195

But this is just the way that Bootstrap works.
196

And there are other frameworks which have more succinct names for their classes, but once you understand
197

how Bootstrap works, it's quite easy to pick up any of these other front end frameworks.
198

They all work in a really really similar way.
199

So now we've got this div class called collapse navbar-collapse, and I'm going to put the closing div
200

just after our unordered list so that the unordered list,
201

so all of these three links, as well as our brand, is enclosed in the collapsable section or the collapsable
202

di. And the final thing we need to add before our navbar is going to work is that we need that id,
203

because the button is targeting this specific id, so it knows that when you click on this button, which
204

div to collapse or uncollapse, because you could have many of these collapsable sections on the same web site,
205

and you need something specific so that the code knows which parts to collapse and which parts not to
206

collapse.
207

So let's add that id over here.
208

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

target in your button, then it should work just fine.
210

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

disappears, including the navbar-brand and all three of my links, because we haven't closed all of
212

them inside this collapsable div.
213

So now if I click on this button you will see a dropdown menu and a nice animation that shows everything
214

that's contained in that collapsable area.
215

So in my case I would actually rather like my brand to still show up when it is in the mobile size.
216

So I'm going to take out my navbar-brand, or rather this anchor tag,
217

so I'm going to cut.
218

So it matters a great deal where you place that navbar-brand, because if you paste it below the button
219

that is our toggle button, then when you hit run you'll see that the brand appears on the right and the
220

toggle appears on the left.
221

Now if you place this anchor tag for your brand above the button, however, then you hit run, and their positions
222

get swapped.
223

So the first thing that gets rendered is the navbar-brand,
224

then we render the button.
225

So this is something to be aware of.
226

And in our case we actually want the brand to be on the left and the menu icons to be on the right.
227

So this is the format that we're looking for.
228

So now we've got this brilliant navbar, where it expands to have all the links on the right
229

when it's in a large display, so a laptop or desktop,
230

and when we're on a smartphone or a tablet, then it shrinks down into a toggle button, which we can show
231

or unshow our navigation menu.
232

Now there's a number of other things that you can do with the navigation bar.
233

So, for example, you can have a dropdown link like so, just by adding the class dropdown to your list item
234

and have a link
235

that is the dropdown toggle, and then you have a div with all the items that will be inside the dropdown.
236

So you're basically just copying this list item and modifying it to your needs to specify how you want
237

your dropdown to look like.
238

Now you can also affect the position of the navbar by changing it to a navbar fixed-top,
239

so that means when you scroll through your web site, it will stay at that position and it won't disappear
240

off the screen. Or you can have it fixed to the bottom so that you've always got it at the bottom. And
241

you can just copy this code to get this positioning and placement behavior.
242

Now in the next lesson we're going to be looking at the grid system and we're going to start to build
243

up our TinDog web site.
244

So there's a lot more fun stuff yet to come.
245

And I look forward to seeing you on the next lesson.