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.