WEBVTT 0 00:01.370 --> 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 00:08.480 --> 00:12.760 then it's time to turn this design into the real thing. 2 00:12.800 --> 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 00:18.050 --> 00:22.220 features and components in Bootstrap. And through building this web site, 4 00:22.220 --> 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 00:28.460 --> 00:29.800 it to your needs. 6 00:29.990 --> 00:37.260 So in the coming lessons we're going to be recreating this entire page and it's design using Bootstrap. 7 00:37.280 --> 00:41.480 So the first thing I want to tackle is this navigation bar up here. 8 00:42.480 --> 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 00:49.050 --> 00:55.410 so that, for example, if I clicked on a company or something, it would scroll down to that section where 10 00:55.410 --> 00:56.380 it's relevant to. 11 00:56.580 --> 01:01.270 And this is usually the navigation that you see in the single page landing pages. 12 01:01.320 --> 01:07.200 And in order to put in that navigation bar, we're going to be using Bootstrap. Now, because Bootstrap is 13 01:07.260 --> 01:14.910 a library, which means that it contains reusable bits of code that we want to put into our project, 14 01:14.910 --> 01:18.390 now sometimes with libraries you might have written them yourself, 15 01:18.390 --> 01:25.710 so, for example, if you particularly liked a button that you created in CSS, then you might want to reuse 16 01:25.710 --> 01:31.860 that bit of code by putting it into a separate file and dropping it into your projects when you want 17 01:31.860 --> 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 01:39.990 --> 01:43.250 it was originally made by the team at Twitter, 19 01:43.410 --> 01:47.380 but since then it's had a large number of contributors, 20 01:47.520 --> 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 01:54.510 --> 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 01:59.850 --> 02:05.100 the documentation and we need to see what are the guidelines and what are the rules that we need to 23 02:05.100 --> 02:09.350 know about in order to use their components and their features. 24 02:09.360 --> 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 02:14.610 --> 02:17.330 and you’re going to navigate to Navbar. 26 02:17.820 --> 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 02:23.790 --> 02:28.130 first going to create it and test it out in a Code Ply playground. 28 02:28.170 --> 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 02:34.170 --> 02:40.840 version from 3.3 to 4.0, so that we're up to date with the latest version. 30 02:40.860 --> 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 02:49.950 --> 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 02:55.290 --> 02:55.870 does. 33 02:56.070 --> 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 03:01.410 --> 03:01.910 going to know 35 03:01.920 --> 03:05.530 this is probably going to be the code that's related to the navigation bar. 36 03:05.610 --> 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 03:10.230 --> 03:13.080 have any content, it doesn't have any dimensions. 38 03:13.290 --> 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 03:19.710 --> 03:24.780 item, and this list item is going to be one of our menu icons. 40 03:24.780 --> 03:29.570 So maybe we'll want a contact link inside our navigation bar. 41 03:29.850 --> 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 03:35.010 --> 03:39.120 and this looks nothing like a navigation bar yet. 43 03:39.180 --> 03:45.570 So we can start using the Bootstrap classes, and we're going to add those classes to our nav element 44 03:45.690 --> 03:48.890 just as they've shown here in their documentation. 45 03:48.900 --> 03:52.280 So the first one that we're going to add is the navbar. 46 03:52.410 --> 03:58.650 And if we have a look inside that bootstrap.css file that we downloaded earlier, and let's search 47 03:58.650 --> 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 04:09.420 --> 04:15.940 it to this navigation element, and you can see what it does is that it changes the position to relative. 49 04:16.020 --> 04:21.890 It makes the content justified. It adds a little bit of padding. And it also adds some alignment and further 50 04:21.930 --> 04:23.440 positioning rules. 51 04:23.460 --> 04:28.530 Now, in addition to that, we're going to apply some other styles to the other elements inside our code. 52 04:28.890 --> 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 04:38.520 --> 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 04:48.930 --> 04:50.420 ul has that class, 55 04:50.430 --> 04:51.570 navbar-nav, 56 04:51.660 --> 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 04:59.280 --> 05:03.090 see what applying each of these styles actually does. 58 05:03.240 --> 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 05:08.700 --> 05:14.010 different style based on those three different classes that we just added. 60 05:14.040 --> 05:19.150 Now, the text in our navbar is probably going to be a link, right? 61 05:19.170 --> 05:24.520 We want to be able to click on it and to scroll to a particular section in our web site. 62 05:24.690 --> 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 05:31.260 --> 05:32.020 etc.. 64 05:32.250 --> 05:38.580 So this can't just be plain text and instead we should change it into an anchor tag. 65 05:38.880 --> 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 05:47.400 --> 05:50.720 a link, so that when I hover over it, it changes color, etc.. 67 05:50.850 --> 05:56.530 So we've got the class, and we need an href for this to be a valid anchor tag. 68 05:56.580 --> 05:58.430 And I'm just going to leave that empty. 69 05:58.710 --> 06:04.770 And finally I’m just going to close off the tag and add a link text called Contact. 70 06:04.770 --> 06:11.070 And now, if I run the code, you'll see that Bootstrap has styled this completely differently and that 71 06:11.070 --> 06:17.000 when I hover over it, it appears as a link by changing the color and also showing that little pointer. 72 06:17.010 --> 06:23.310 So we've managed to create a very simple navigation bar just by adding a few classes and following the 73 06:23.310 --> 06:26.550 structure that Bootstrap wants us to use. 74 06:26.550 --> 06:28.660 So let's go ahead and add a few more links. 75 06:28.710 --> 06:33.620 So I'm just going to copy these link items and paste two more in here. 76 06:33.840 --> 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 06:41.430 --> 06:48.660 run our code and you can see that the strange thing is that it's made our navigation bar vertical. 78 06:48.660 --> 06:53.190 So each navigation item is vertically stacked on top of each other. 79 06:53.190 --> 06:58.890 Now that's not really what I designed it to be. I want it to be horizontal like this. 80 06:58.890 --> 07:00.970 And also like this. 81 07:00.990 --> 07:08.940 So, in order to do that, we need a class called navbar-expand, and this will expand the navigation items 82 07:09.240 --> 07:12.770 depending on how large the screen is. 83 07:12.960 --> 07:14.840 So let me show you that by adding the code. 84 07:14.850 --> 07:19.890 So we're going to add navbar-expand and we're going to say large. 85 07:20.010 --> 07:27.290 So, when I run this code, you'll see that in the current viewport, which is kind of the desktop 86 07:27.360 --> 07:31.260 size, so laptop or desktop, where you've got quite a lot of width, 87 07:31.440 --> 07:35.580 you can see that all the links are horizontally displayed next to each other. 88 07:35.580 --> 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 07:44.100 --> 07:44.910 of the real estate 90 07:44.940 --> 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 07:50.910 --> 07:55.170 small, to specify at which point it should go into the vertical. 92 07:55.170 --> 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 08:03.090 --> 08:05.610 it is horizontal, tablet size 94 08:05.610 --> 08:11.400 it’s still horizontal, but smartphone size it goes into vertical. So you can change that by just changing 95 08:11.430 --> 08:12.400 the keyword here. 96 08:12.510 --> 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 08:19.470 --> 08:20.140 on. 98 08:20.160 --> 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 08:24.930 --> 08:26.140 like I've got three links. 100 08:26.160 --> 08:28.380 I don't actually see any sort of bar. 101 08:28.620 --> 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 08:36.300 --> 08:38.570 And we're going to use background light here. 103 08:38.580 --> 08:43.640 So let's add a background light class and hit run. 104 08:43.750 --> 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 08:49.890 --> 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 08:57.390 --> 08:58.910 it’s not blue. 107 08:58.910 --> 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 09:06.950 --> 09:14.120 to this, because we're using the navbar-light style of navbars, as they showed in the documentation. 109 09:14.150 --> 09:21.530 Now Bootstrap, by default, has a number of colors, and you can see it most obviously if you go into 110 09:21.590 --> 09:27.430 the Buttons documentation, and they show you all the names of the colors. 111 09:27.470 --> 09:34.520 So you've got Primary, which is blue, and that kind of comes from the Twitter days where their primary 112 09:34.520 --> 09:41.930 color was always light blue color, Secondary is grey, Success, Danger, Warning, Info, Light. So we can use 113 09:42.020 --> 09:45.170 any of these colors just by using those words. 114 09:45.170 --> 09:52.290 So, for example, if I wanted the background to be red, then I can say background danger, hit run, 115 09:52.400 --> 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 10:01.740 --> 10:03.190 can change them to 117 10:03.240 --> 10:08.070 all of these colors that you see here just by using their names. 118 10:08.070 --> 10:10.750 Now, in our case I want to use a navbar-dark, 119 10:10.790 --> 10:15.630 and I want to change the background to dark as well. 120 10:15.630 --> 10:21.430 Now let's hit run, and you can see we've got this black background with a whitish navbar. 121 10:21.570 --> 10:24.120 So that style comes from these two classes. 122 10:24.120 --> 10:25.190 Now what if, 123 10:25.200 --> 10:26.530 like over here, 124 10:26.550 --> 10:31.600 I want to have a brand, say, the name of my company or the logo. 125 10:31.620 --> 10:33.130 How can I implement that? 126 10:33.330 --> 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 10:38.730 --> 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 10:44.850 --> 10:46.370 thing to apply it to. 129 10:46.560 --> 10:49.670 So let's go ahead and do exactly that. 130 10:49.680 --> 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 10:59.040 --> 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 11:07.140 --> 11:11.100 tag and call it tindog, after our brilliant company. 133 11:11.220 --> 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 11:17.070 --> 11:19.540 the links to be able to differentiate it. 135 11:19.710 --> 11:26.490 And that and all of the styling and all of these components comes free from Bootstrap just by adding 136 11:26.490 --> 11:27.570 these classes. 137 11:27.720 --> 11:29.540 So I hope you're getting the hang of this. 138 11:29.610 --> 11:32.570 So now that I've got all the items on my navbar. 139 11:32.700 --> 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 11:38.700 --> 11:40.000 to be on the right, 141 11:40.050 --> 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 11:45.000 --> 11:46.610 that doesn't look very nice. 143 11:46.620 --> 11:50.270 So how can we shift all of these links over to the right? 144 11:50.460 --> 11:55.860 Well first, let's first identify the container that holds all of these links. And it shouldn't be hard 145 11:55.860 --> 11:58.920 to see that that would be the unordered list. 146 11:59.160 --> 12:05.120 So that separates this group from the anchor tag which is our navbar-brand. 147 12:05.190 --> 12:09.160 Now, in order to move this unordered list over to the right, 148 12:09.420 --> 12:13.480 all we need to do again is to just add another class. 149 12:13.560 --> 12:18.760 And we're not going to need to write any CSS of our own to style this navbar. 150 12:19.020 --> 12:26.160 So what I want is, I want there to be a margin between these sets of links and our brand. 151 12:26.190 --> 12:33.710 So Bootstrap has a nice class called margin left, ml-auto. 152 12:34.020 --> 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 12:42.180 --> 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 12:49.290 --> 12:53.300 this group right next to the edge of the screen. 155 12:53.400 --> 12:58.820 So this is looking a lot better and a lot closer to what we've got in our design here. 156 12:58.920 --> 13:02.880 Now there's just one thing that's not quite ideal. At the moment, 157 13:02.890 --> 13:11.670 when we go from laptop to tablet, our navigation bar changes into the vertical format. Now, wouldn't it 158 13:11.670 --> 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 13:19.320 --> 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 13:25.800 --> 13:26.530 bar? 161 13:27.000 --> 13:28.330 Well, how would we do that? 162 13:28.380 --> 13:35.840 Let's take a look at the documentation on Bootstrap. So, we can scroll or simply select the Toggler. 163 13:35.880 --> 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 13:44.220 --> 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 13:52.710 --> 13:53.810 the same line. 166 13:54.120 --> 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 14:01.290 --> 14:08.070 got at the moment, or the more intelligent way is having this button show up, which is called a hamburger 168 14:08.100 --> 14:12.700 menu, because it looks, well somebody once thought it looks, like a hamburger. 169 14:12.960 --> 14:17.940 Personally, being a hamburger connoisseur, I think it looks nothing like a hamburger, but there's only 170 14:17.940 --> 14:19.660 so many fights you can fight. 171 14:19.710 --> 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 14:26.760 --> 14:28.710 all of those links that are hidden. 173 14:28.890 --> 14:35.670 And this makes the design really really clean and also makes the best use of the size of the screen 174 14:35.970 --> 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 14:43.140 --> 14:44.980 It'll be really really hard to read. 176 14:45.120 --> 14:48.530 And instead you want to have this nice dropdown menu. 177 14:48.600 --> 14:51.590 So how can we implement this in our code? 178 14:52.020 --> 14:53.760 Well, let's see what they did. 179 14:53.940 --> 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 15:00.970 --> 15:09.240 going to target something called navbarTogglerDemo02, which you can see is this thing here. 181 15:09.550 --> 15:18.300 So they've created a div that contains everything that is collapsable, and put it inside that div. 182 15:18.490 --> 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 15:25.810 --> 15:27.730 this button. 184 15:27.730 --> 15:32.220 Now let's see if we can do the same thing in our code. 185 15:32.260 --> 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 15:40.940 --> 15:46.570 our nav element. And the next thing I want to do is create that div. 187 15:46.720 --> 15:51.240 Now the location where you create the div is really really important. 188 15:51.460 --> 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 15:57.670 --> 16:00.860 the brand as well as all of our links. 190 16:01.030 --> 16:06.210 So the div is going to have a class of collapse 191 16:06.370 --> 16:08.550 navbar-collapse. 192 16:09.250 --> 16:14.380 Now sometimes you realize that Bootstrap really could have made their class naming a little bit more 193 16:14.380 --> 16:14.910 succinct. 194 16:14.950 --> 16:19.430 You end up writing a lot of nav navbar nav navbar collapse. 195 16:19.540 --> 16:21.930 But this is just the way that Bootstrap works. 196 16:21.930 --> 16:29.110 And there are other frameworks which have more succinct names for their classes, but once you understand 197 16:29.110 --> 16:33.820 how Bootstrap works, it's quite easy to pick up any of these other front end frameworks. 198 16:33.820 --> 16:36.610 They all work in a really really similar way. 199 16:36.610 --> 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 16:43.780 --> 16:50.130 just after our unordered list so that the unordered list, 201 16:50.180 --> 16:58.960 so all of these three links, as well as our brand, is enclosed in the collapsable section or the collapsable 202 16:58.960 --> 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 17:06.460 --> 17:14.770 because the button is targeting this specific id, so it knows that when you click on this button, which 204 17:14.770 --> 17:20.890 div to collapse or uncollapse, because you could have many of these collapsable sections on the same web site, 205 17:21.370 --> 17:27.730 and you need something specific so that the code knows which parts to collapse and which parts not to 206 17:27.730 --> 17:28.380 collapse. 207 17:28.600 --> 17:31.160 So let's add that id over here. 208 17:32.420 --> 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 17:37.580 --> 17:41.140 target in your button, then it should work just fine. 210 17:41.150 --> 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 17:49.040 --> 17:58.070 disappears, including the navbar-brand and all three of my links, because we haven't closed all of 212 17:58.070 --> 18:02.120 them inside this collapsable div. 213 18:02.630 --> 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 18:09.560 --> 18:13.190 that's contained in that collapsable area. 215 18:13.190 --> 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 18:22.850 --> 18:29.270 So I'm going to take out my navbar-brand, or rather this anchor tag, 217 18:29.410 --> 18:30.570 so I'm going to cut. 218 18:30.590 --> 18:37.730 So it matters a great deal where you place that navbar-brand, because if you paste it below the button 219 18:38.060 --> 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 18:46.340 --> 18:49.160 toggle appears on the left. 221 18:49.160 --> 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 18:57.950 --> 18:59.210 get swapped. 223 18:59.240 --> 19:03.280 So the first thing that gets rendered is the navbar-brand, 224 19:03.290 --> 19:04.700 then we render the button. 225 19:04.700 --> 19:06.550 So this is something to be aware of. 226 19:06.680 --> 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 19:12.140 --> 19:14.820 So this is the format that we're looking for. 228 19:14.960 --> 19:20.900 So now we've got this brilliant navbar, where it expands to have all the links on the right 229 19:21.050 --> 19:25.040 when it's in a large display, so a laptop or desktop, 230 19:25.130 --> 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 19:32.450 --> 19:34.970 or unshow our navigation menu. 232 19:34.970 --> 19:39.030 Now there's a number of other things that you can do with the navigation bar. 233 19:39.080 --> 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 19:47.870 --> 19:49.270 and have a link 235 19:49.310 --> 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 19:56.030 --> 20:02.690 So you're basically just copying this list item and modifying it to your needs to specify how you want 237 20:02.690 --> 20:04.360 your dropdown to look like. 238 20:04.370 --> 20:10.530 Now you can also affect the position of the navbar by changing it to a navbar fixed-top, 239 20:10.550 --> 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 20:16.460 --> 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 20:22.100 --> 20:27.100 you can just copy this code to get this positioning and placement behavior. 242 20:27.200 --> 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 20:33.470 --> 20:35.480 up our TinDog web site. 244 20:35.660 --> 20:38.030 So there's a lot more fun stuff yet to come. 245 20:38.030 --> 20:40.370 And I look forward to seeing you on the next lesson.