WEBVTT 0 00:00.260 --> 00:00.890 Hey, guys. 1 00:00.890 --> 00:06.230 In this lesson, we're going to be learning about one of the most powerful features of Bootstrap and 2 00:06.230 --> 00:11.090 one of the biggest reasons why we would be using Bootstrap in our project in the first place, 3 00:11.090 --> 00:19.460 and that is the concept of the Bootstrap Components. The pre-built, pre-styled components like buttons, 4 00:19.460 --> 00:26.030 and cards, and carousels, and a whole load of beautiful things that we get access to simply by adding 5 00:26.030 --> 00:29.390 in a Bootstrap class into our HTML. 6 00:29.510 --> 00:35.480 Let's start with one of the most commonly used components, which is the Bootstrap button. 7 00:35.480 --> 00:42.410 And this is a really good place to start because you also see the default Bootstrap styling and the 8 00:42.410 --> 00:47.920 color scheme. In most of the components that you'll get access to through Bootstrap, 9 00:47.930 --> 00:51.440 if you want to give it a particular color, 10 00:51.440 --> 00:59.360 it's really easy to access all of these default colors by simply using their name. In most cases in a 11 00:59.360 --> 01:06.690 Bootstrap designed website, the primary button, the "Go to", the "Buy", or the "Contact Us", or 12 01:06.690 --> 01:13.470 "Download" whatever will be this blue color and you can access all of the other colors through each of 13 01:13.470 --> 01:18.930 their Bootstrap names. And they give you a little bit of a hint as to what they're used for, 14 01:18.930 --> 01:22.560 so Success is usually like an okay button. Danger, 15 01:22.560 --> 01:29.130 maybe if you click this button, something really bad happens, or Warning, etcetera. And you get access 16 01:29.130 --> 01:37.950 to this button and this button styling, simply by creating a button HTML element, giving it the class 17 01:37.980 --> 01:45.210 "btn" for a Bootstrap button, and then adding the class for the color scheme from this list that you 18 01:45.210 --> 01:46.200 want to choose. 19 01:46.200 --> 01:47.730 Let's try this out. 20 01:47.760 --> 01:54.990 Go ahead and download the starting files from the 11.2 Bootstrap Components zip file and once you've 21 01:54.990 --> 01:57.690 extracted it, and opened it inside VS Code, 22 01:57.720 --> 01:59.970 head over to index.html. 23 02:00.000 --> 02:06.090 Now here you'll notice that I've already added in the Bootstrap link, we've got a style section which 24 02:06.090 --> 02:12.780 we can add custom CSS to, and in the body area, I want you to use the Bootstrap documentation. 25 02:12.780 --> 02:18.780 So if you go to the Bootstrap main website at getbootstrap.com, go to Docs and then scroll down to 26 02:18.780 --> 02:26.370 the Components find the Buttons, and I want you to put in a green button that says, Ok, somewhere 27 02:26.370 --> 02:27.630 onto this website. 28 02:27.630 --> 02:34.170 Remember, you can preview it in real time to see if it's working and pause the video now and complete 29 02:34.170 --> 02:35.100 this challenge. 30 02:36.600 --> 02:36.930 All right. 31 02:36.930 --> 02:38.760 So this is pretty simple. 32 02:38.760 --> 02:42.480 We have a button which we said is going to say, "Ok". 33 02:42.780 --> 02:49.500 And in order to style it using Bootstrap, the first thing we do is add the btn class and you can see 34 02:49.500 --> 02:52.500 automatically the font changes, the background color changes, 35 02:52.500 --> 02:55.830 and then we said we wanted to have a green button. 36 02:55.830 --> 02:59.490 So the green button is "btn-success". 37 02:59.490 --> 03:02.820 So let's go ahead and add btn-success, 38 03:02.820 --> 03:09.030 and once we're done, you can see we've got a beautiful green button with a hover animation with nice 39 03:09.030 --> 03:15.330 styling, a good size, rounded corners, all of that goodness without doing a lot of work at all. 40 03:15.330 --> 03:20.940 It was super, super simple to create this. And this should give you a taste of what's yet to come. 41 03:21.240 --> 03:26.820 The next component I want to talk about is a really useful one, which is the Card which you already 42 03:26.820 --> 03:29.250 saw in the previous lessons' exercise. 43 03:29.250 --> 03:35.880 And as always, all we need to do is go to that particular Component's page and then we can simply copy 44 03:35.980 --> 03:42.490 the code, paste it into our website and replace certain parts of the code, such as the image source (src) 45 03:42.490 --> 03:43.720 or the alt text. 46 03:43.840 --> 03:49.390 Now, one component that you're probably going to be using whenever you're building a website is a 47 03:49.420 --> 03:54.940 navbar and the Bootstrap navbars are some of the best-designed navbars I've seen, 48 03:54.940 --> 04:01.500 and it also is super easy to include simply using their example snippet codes. 49 04:01.510 --> 04:09.610 If you head over to the Navbar, you can read on how it works and also what's some of the examples 50 04:09.610 --> 04:17.260 they have, for example, this one with a Search bar with some dropdowns, and this one which describes 51 04:17.260 --> 04:23.200 how you can have the brand at the top left or if you want an image, image and text brand and you can 52 04:23.200 --> 04:29.860 scroll through this to find the kind of navbar you want to create and to use the example code. 53 04:29.950 --> 04:36.820 Now another area for the navbars is if you head over to Examples and you go to the Headers Section, 54 04:36.820 --> 04:45.040 you can see some even more fancily laid out navbars over here. In order to show you some of the different 55 04:45.070 --> 04:49.060 types of Components and how they can be used in real life, 56 04:49.060 --> 04:53.920 we are going to be building a Moving startup's website. 57 04:53.950 --> 05:00.700 They're called Move It, which is pretty simple and it's got a one page website with many different 58 05:00.700 --> 05:06.940 sections and I'm going to show you just how easy it is to build this entire fully fledged website using 59 05:06.940 --> 05:08.770 just Bootstrap Components. 60 05:08.770 --> 05:15.280 So the first thing we need is that navbar, and you'll notice that I've taken the navbar that is pretty 61 05:15.280 --> 05:17.050 much this standard one. 62 05:17.050 --> 05:20.710 So it's got a field which you can search for, say the Postcode, 63 05:20.710 --> 05:27.070 if our company works in your area, it's got some dropdown menus, it's got some other little areas 64 05:27.070 --> 05:28.570 which you can click on. 65 05:28.570 --> 05:37.540 So let's go ahead and copy the code for the starting point of our navbar and let's paste it into the 66 05:37.540 --> 05:39.700 body of our code. 67 05:39.700 --> 05:43.540 So you can see as soon as I've done that, I've got my navbar show up, 68 05:43.540 --> 05:48.640 but one thing you'll notice as soon as you start playing around with it is when a Bootstrap navbar 69 05:48.640 --> 05:57.370 is in a smaller width, it will automatically show a hamburger menu and that menu should have a dropdown 70 05:57.370 --> 06:00.010 with all of the buttons from the navigation bar. 71 06:00.010 --> 06:03.460 Now why is our button not working? 72 06:03.460 --> 06:09.910 Now remember previously I said when we get started with Bootstrap there's two links to include via CDN. 73 06:09.940 --> 06:14.410 The first one is the style sheet and that gives us all of the styling, 74 06:14.410 --> 06:20.950 but the second one is the scripting code that gives us all of the functionality because this gives us 75 06:20.950 --> 06:24.760 access to the Bootstrap JavaScript code. 76 06:24.760 --> 06:28.990 Now we don't need to understand anything about JavaScript just yet in order to use it, 77 06:28.990 --> 06:37.030 all we need to do is copy that link and go to, right at the end, just before the closing body tag and 78 06:37.030 --> 06:39.190 paste that script link in there. 79 06:39.190 --> 06:45.160 And you can see as soon as I've done that, my buttons now work, my dropdowns work and all of these 80 06:45.160 --> 06:52.360 clicking functionality bits start working and this again comes straight out of the box from Bootstrap. 81 06:52.900 --> 06:56.710 Let's take a look at this website in a larger format 82 06:56.710 --> 07:03.370 by opening Inside Chrome. You can see that for the most part, these two nav bars look pretty similar. 83 07:03.370 --> 07:07.630 All I did is got rid of some of the components and changed some of the other things. 84 07:07.630 --> 07:13.000 For example, this button is disabled so that users can't click on it, 85 07:13.000 --> 07:15.880 and in our version we actually just got rid of it. 86 07:15.910 --> 07:18.850 We can do that quite easily by finding that button. 87 07:18.850 --> 07:24.970 And you can see the reason why it's not enabled is because it has this class of disabled. 88 07:24.970 --> 07:30.490 So if we get rid of that, then you can see this button is now active once more, but we don't actually 89 07:30.490 --> 07:31.510 want it at all, 90 07:31.510 --> 07:34.810 so let's delete that entire list item 91 07:34.810 --> 07:35.800 and now 92 07:35.960 --> 07:37.880 we only have three links, 93 07:38.300 --> 07:40.160 Home, Link and Dropdown. 94 07:40.160 --> 07:43.910 So let's rename those links to About and Services. 95 07:43.910 --> 07:50.420 And again, because this is just a simple anchor tag, you know exactly how to work with this. 96 07:50.420 --> 07:52.400 So the first one is Link, 97 07:52.400 --> 08:01.370 so we'll change this to About, and the Dropdown instead of reading Dropdown will say it's called Services. 98 08:01.370 --> 08:07.310 And you can imagine in the future we would have our different services in the dropdown, like Moving 99 08:07.310 --> 08:12.440 with a van, Moving by hauling everything yourself, or something else. 100 08:12.440 --> 08:16.130 But this is just an example of how our navbar could look. 101 08:16.370 --> 08:23.660 Now the first part of the navbar is the "navbar-brand" and we can see that right up here. 102 08:23.660 --> 08:27.680 We've got an anchor tag which is called the Navbar brand, for example, 103 08:27.680 --> 08:32.120 if I change it to "Move It", then that's going to change our brand text. 104 08:32.150 --> 08:39.060 In addition, we can also have an image in here so you can simply just add an image, give it a source, 105 08:39.060 --> 08:42.690 maybe let's use one of the images we already have in our folder, 106 08:42.690 --> 08:44.810 for example, the dog.jpg. 107 08:44.820 --> 08:51.600 Now, because this image is super, super large and we haven't really resized it, then it's not really 108 08:51.600 --> 08:55.230 going to work in the navbar, but you can always change this. 109 08:55.230 --> 08:57.630 So let's change the height to just 20px. 110 08:57.630 --> 09:01.140 Then you can see our navbar brand image show up right there. 111 09:01.170 --> 09:03.960 Now in our case, we're not going to use an image, 112 09:03.960 --> 09:08.490 instead, I'm going to delete that tag and I'm going to use an SVG. 113 09:09.120 --> 09:14.010 This is a good time to show you the SVGs which are available through Bootstrap. 114 09:14.010 --> 09:20.670 So if you go back to the home page and you click on icons, you can see you got all of these free icons 115 09:20.670 --> 09:25.950 for you to use in any of your websites, paid, monetized, whatever, 116 09:25.950 --> 09:31.830 and it's really hard actually, sometimes finding well-designed icons that you can simply add to your 117 09:31.830 --> 09:35.430 project without having to pay royalties and buy it from a designer. 118 09:35.430 --> 09:43.170 So this is also really, really neat and you can search through the different icons by using the filter. 119 09:43.170 --> 09:49.650 So the one that I found is actually this box with seams on it, which looks very much like a moving 120 09:49.650 --> 09:51.150 company box to me. 121 09:51.150 --> 09:57.780 And you can either simply just copy the SVG straight up into your HTML. 122 09:57.780 --> 10:00.540 So if I paste it in here, you'll see it show up right there. 123 10:00.570 --> 10:07.890 Alternatively, you can also include it as an image and you set the source to the SVG that you have 124 10:07.890 --> 10:10.800 saved in your folder, which is right here. 125 10:11.310 --> 10:17.370 I'm going to use the image in the folder by setting it as a src, and I'm going to set the alt text 126 10:17.370 --> 10:25.500 to "moveit brand icon," and then I'm going to change the height to, let's say 30 so that it's a little 127 10:25.500 --> 10:26.280 bit bigger. 128 10:26.280 --> 10:30.870 And we now have a navbar that looks the same as the example. 129 10:30.990 --> 10:36.900 Now on the right hand side, there is a form here and I know we haven't spoken much about forms that's 130 10:36.900 --> 10:37.620 all yet to come 131 10:37.620 --> 10:43.110 when we learn more about how to have the actual Form functionality later on, especially in the back-end 132 10:43.110 --> 10:46.170 section, this is all going to come in really, really handy. 133 10:46.170 --> 10:53.580 But for now, we're just going to change this Search bar from Search to say, Postcode and Check. 134 10:53.580 --> 10:55.500 So that's pretty easy to find. 135 10:55.500 --> 11:01.350 You can either use command + F to find those words, or you can scroll through your code to find it as well. 136 11:01.470 --> 11:09.540 Let's change the button to say, Check and let's change the placeholder for that search bar into, say, 137 11:09.540 --> 11:10.590 Postcode. 138 11:12.420 --> 11:13.500 There we go. 139 11:13.500 --> 11:16.320 And now we've completed our navbar. 140 11:16.320 --> 11:21.960 And if you had to design, all of that from scratch and all of the CSS that's included, and you can see 141 11:21.990 --> 11:27.990 just how much CSS there is actually, if you click on one of these items, you can see the nav-link 142 11:27.990 --> 11:35.220 that I just clicked on has all the padding defined, has all of this defined, has toggle styling, 143 11:35.220 --> 11:37.980 and that's just one part of this entire navbar. 144 11:37.980 --> 11:44.340 So you can see just how much time we're saving ourselves and we're able to leverage a professional design 145 11:44.340 --> 11:48.270 and create something that looks really contemporary and beautiful. 146 11:48.420 --> 11:50.580 Now let's move on to the next section. 147 11:50.580 --> 11:54.030 And this entire section is made up of different components, 148 11:54.030 --> 11:59.160 so maybe an h1 heading, a paragraph, two buttons, and an image, 149 11:59.160 --> 12:04.710 but if we want to just take this layout, I actually got it from the examples. 150 12:04.740 --> 12:11.130 The examples area is really, really good for taking bits and bobs of the different code snippets, 151 12:11.130 --> 12:17.400 the different Components that they've already styled and created for you, and simply putting it into 152 12:17.430 --> 12:19.770 your website where it makes sense. 153 12:19.770 --> 12:21.780 So this is a Hero, 154 12:21.780 --> 12:24.240 and as you can see, it's this one. 155 12:24.240 --> 12:31.560 It's pretty much exactly the same title, text, two buttons and an image, and everything is styled beautifully 156 12:31.560 --> 12:33.810 already for you in order to use it. 157 12:33.810 --> 12:35.730 All we need to do is right-click 158 12:36.130 --> 12:37.360 on Inspect, 159 12:37.870 --> 12:41.560 and now we want to expand our elements area. 160 12:41.570 --> 12:49.660 And what I tend to do is just to go upwards on the hover until the highlight actually highlights the 161 12:49.660 --> 12:52.900 area that I want, which is this div right here. 162 12:53.050 --> 13:00.010 Let's go ahead and copy this div and put it into our code just below our navbar. 163 13:00.430 --> 13:07.040 Now once I've done that, you can see we've got our centered screenshot, text, button and an image. 164 13:07.060 --> 13:11.530 Let's first fix that image so we can see what things should look like. 165 13:11.530 --> 13:15.040 And their src is from the bootstrap-docs, 166 13:15.040 --> 13:22.900 but instead, we want to use the one of the moving-van so that we can show our users what our services 167 13:22.900 --> 13:24.190 are all about. 168 13:24.370 --> 13:28.330 And now all we have to do is just to replace the text. 169 13:28.360 --> 13:36.260 If you look inside the starting file folder, there is a file called website-text, and here you can 170 13:36.260 --> 13:41.180 simply copy all of the website text and replace the relevant parts. 171 13:41.720 --> 13:49.310 The h1 should say "Move With Joy" and then we've got a long bit of text which we're going to replace with 172 13:49.310 --> 13:50.660 our paragraph. 173 13:50.660 --> 13:56.060 So let's just copy everything in that paragraph element and replace it. 174 13:56.060 --> 14:00.770 And then our buttons should say, "Get a quote" and "Contact Us". 175 14:04.350 --> 14:08.940 And now we have a Hero Section done in two seconds. 176 14:09.150 --> 14:13.740 Okay, maybe it was a little bit longer, but you can probably see just how powerful this is. 177 14:13.890 --> 14:15.450 So now let's keep going. 178 14:15.450 --> 14:20.880 In the next section of our example website, we've got some features and this is where you would usually 179 14:20.880 --> 14:24.270 tell people what's so special about your particular startup? 180 14:24.270 --> 14:26.580 Well, our startup is really professional, 181 14:26.580 --> 14:30.240 we are available countrywide, and we have a personal touch. 182 14:30.240 --> 14:35.220 And you might have guessed this comes from the Bootstrap Examples page. 183 14:35.220 --> 14:41.460 They have a section called Features, and this first feature is perfect for our needs. 184 14:41.460 --> 14:47.070 And I think a lot of Bootstrap design kind of comes from Apple, because when you look at the Apple website, 185 14:47.100 --> 14:54.450 a lot of the buttons, the shading, the kind of fonts, they all look really, really similar to the 186 14:54.450 --> 14:55.590 Bootstrap Components. 187 14:55.590 --> 15:02.940 And I think this is probably one of their design inspirations and we can get that simply with some copy 188 15:02.940 --> 15:06.100 and pasting and a little bit of customization. 189 15:06.310 --> 15:12.940 Again, let's go into the section of the features that we want and then we're going to keep hovering 190 15:12.940 --> 15:20.320 up until we find the div that contains all the things that we want, right-click, copy, copy element, 191 15:20.320 --> 15:24.220 and we're going to put it below the previous section. 192 15:24.430 --> 15:26.860 Now let's take a look at our good work. 193 15:26.860 --> 15:30.580 We have our columns with icons and we've got three features. 194 15:31.420 --> 15:34.420 Let's change the text of all of this 195 15:34.420 --> 15:39.490 first, and I'm going to fast-forward through this section so you don't have to watch me copy-paste. 196 15:45.010 --> 15:46.240 And there you have it. 197 15:46.270 --> 15:53.500 We've now got all the text replaced and we should have all of our copy, which is the text for your 198 15:53.500 --> 15:57.190 website inserted into the relevant parts. 199 15:57.310 --> 16:04.000 Now, one thing that you'll notice is very obvious is that this part does not look like this part. 200 16:04.000 --> 16:07.030 And it also doesn't look like the part that we copied the code from. 201 16:07.030 --> 16:09.120 So what is going on here? 202 16:09.130 --> 16:15.900 Well, as I mentioned, most of the Bootstrap styling and Components come from Bootstrap classes, 203 16:15.910 --> 16:19.780 for example, this one looks like this because it has a class of "icon-link" 204 16:19.780 --> 16:27.550 but sometimes, sometimes, we might want to customize the styling that we get so that we have some of our 205 16:27.550 --> 16:31.660 own design features on top of what Bootstrap already addresses. 206 16:31.660 --> 16:40.150 If we right-click on these styled squares from the example website, and if you scroll up to find the 207 16:40.150 --> 16:48.010 div where it highlights the entire square, you can see that this div actually has some custom styling. 208 16:48.020 --> 16:53.570 Now the reason why we know it's custom is because all of the default Bootstrap classes come from something 209 16:53.570 --> 17:00.560 like utilities.css, for example the background gradient, for example the margins, the align, 210 17:00.560 --> 17:01.340 etcetera. 211 17:01.340 --> 17:08.420 But the parts that come from custom CSS for this page is going to have a file that looks like this. 212 17:08.420 --> 17:15.860 So for this features page, they've created some custom CSS and in that custom CSS file they've got 213 17:15.870 --> 17:23.270 little bits of CSS just to make things look a little bit more custom rather than coming from Bootstrap. 214 17:23.510 --> 17:28.850 So the part that we're missing, as you can see, is something called feature-icon. 215 17:28.850 --> 17:37.670 So if we copy all of this CSS and put it into our CSS here between the style tags, then when we look at 216 17:37.670 --> 17:43.040 our website we can see those squares styled the way we want. 217 17:43.220 --> 17:51.530 Now, what we're going to have to do is to remove the SVG in the examples and replace it with our own 218 17:51.590 --> 17:53.680 SVG's that we've downloaded. 219 17:53.690 --> 17:57.560 So let's go ahead and find the first one which is here. 220 17:57.830 --> 18:04.820 Let's go ahead and delete this and simply add an image with the source set as the first one, which 221 18:04.820 --> 18:09.850 is the "briefcase," because we're saying how professional we are. 222 18:09.860 --> 18:20.630 So let's change the alt text. And the second SVG we will replace with the image that is the "bus-front," 223 18:20.630 --> 18:25.340 and this is because we're saying that our services are available countrywide. 224 18:25.580 --> 18:33.710 And then for the final feature icon, we're going to change it to the "chat-square-heart," 225 18:33.740 --> 18:41.840 to say how much of a personal touch our company has, and now we should have all of the icons set 226 18:41.840 --> 18:44.840 up, but they're a little bit small. 227 18:44.990 --> 18:51.950 So in order to get it to the right size, we'll do the same thing that we did with the icon up there. 228 18:51.950 --> 18:54.230 We'll give it a different height. 229 18:54.350 --> 19:05.150 So let's go ahead and add a height of 30 to each of these SVGs and now they are all correctly sized. 230 19:05.150 --> 19:10.400 And while you've been doing the copy and pasting, you might notice there's another SVG here, which 231 19:10.400 --> 19:11.960 is the chevron-right, 232 19:11.960 --> 19:15.170 which is this little forward button here. 233 19:15.170 --> 19:21.830 We can also replace that with our images, which is the "chevron-right," 234 19:21.830 --> 19:29.900 and we'll give it an alt text and copy and paste this to all three places where they exist. 235 19:31.760 --> 19:40.970 Now, the reason why the SVGs that we copied from the features section doesn't work on our website is 236 19:40.970 --> 19:44.450 because SVGs can be installed in many different ways. 237 19:44.450 --> 19:52.640 We can download it just as I have done and put them into the project folder and you can access it through 238 19:52.640 --> 19:55.430 the SVG element or through an image element. 239 19:55.760 --> 20:01.460 Alternatively, you can simply copy the entire HTML code. For a clean look, 240 20:01.460 --> 20:07.520 I've simply downloaded each of the SVGs into our resources folder and added them as images. 241 20:07.520 --> 20:10.610 It really is up to you how you want to do it. 242 20:10.910 --> 20:16.880 Now that you've seen a little bit about how we can use the different code snippets from the Bootstrap 243 20:16.880 --> 20:21.830 Components or from Bootstrap Examples, I've got an exercise for you. 244 20:21.950 --> 20:29.420 We know that the next section after Features, is our Carousel and it's simply a component that allows 245 20:29.420 --> 20:31.670 you to scroll through different pages. 246 20:31.680 --> 20:37.980 Now the one that I've chosen here has an indicator at the bottom, so you can easily switch to whichever 247 20:37.980 --> 20:38.850 page you want. 248 20:38.880 --> 20:45.330 It's got the side buttons here so you can go left and right and all it has are just three large images, 249 20:45.330 --> 20:49.440 but be aware that the images don't go all the way to the edge. 250 20:49.440 --> 20:53.490 Instead, they are aligned with the rest of the content. 251 20:53.490 --> 20:55.620 So have a think about what you've learnt before. 252 20:55.650 --> 20:59.310 Have a read of the Carousel documentation. 253 20:59.310 --> 21:06.560 Find the example that you think looks the most like the outcome and see if you can complete this challenge. 254 21:06.570 --> 21:07.740 Pause the video now. 255 21:08.960 --> 21:09.440 All right. 256 21:09.440 --> 21:15.440 If you completed this challenge successfully, we've now got another section here, which is a Bootstrap 257 21:15.440 --> 21:21.140 Carousel, which is really neat when you want to display some gallery images or maybe you have some 258 21:21.140 --> 21:26.060 testimonials you want users to be able to flip through and maybe you want to show all the members of 259 21:26.060 --> 21:26.990 your team. 260 21:26.990 --> 21:33.530 And if you look inside the carousel example here, you can see there's an example with different text, 261 21:33.530 --> 21:37.070 but the example that I used is actually even simpler than that. 262 21:37.070 --> 21:39.770 It's in the Docs inside the Components. 263 21:39.770 --> 21:45.470 So going back to the Components now, we can take a look at how the carousel works if you want to have 264 21:45.470 --> 21:46.070 a read, 265 21:46.070 --> 21:53.540 But I've chosen one of the basic examples which has an indicator where you can toggle to different pages 266 21:53.540 --> 21:57.650 and we simply have a big image covering the entire carousel. 267 21:57.650 --> 22:03.050 Let's copy this code and paste it into our website. 268 22:03.410 --> 22:06.860 Now when you paste it, you won't see anything happen at all, 269 22:06.860 --> 22:12.930 and the reason is because there's no images, the images are broken and that's because the images have 270 22:12.930 --> 22:15.180 no src set by default. 271 22:15.180 --> 22:18.420 So let's go ahead and set our carousel image src. 272 22:18.420 --> 22:24.030 So the first one we're going to set to the "couple" and, 273 22:25.950 --> 22:30.630 the second one we're going to set as the "dog". 274 22:32.820 --> 22:39.750 This is almost like an evolution of a family going from a couple to a dog to a family. 275 22:39.750 --> 22:43.920 And finally, we have all of our photos set up. 276 22:43.920 --> 22:50.760 And now if we take a look, you can see our carousel is showing and it's working, but it's maybe a 277 22:50.760 --> 22:52.850 little bit too big. 278 22:52.860 --> 22:56.670 It's kind of taking up more than the height of the website. 279 22:56.670 --> 22:59.880 And that's because this is set to cover the entire width. 280 23:00.030 --> 23:08.190 If you remember from previous lessons, one of the best components to size everything evenly is from 281 23:08.190 --> 23:12.210 the Layout Section, and it is our Container. 282 23:12.210 --> 23:17.460 We know that we're going to get a uniform look if we put things inside a container div. 283 23:17.490 --> 23:19.590 So that's exactly what we're going to do. 284 23:19.590 --> 23:29.370 I'm going to create a div and I'm going to set it to class of "container" and I'm going to move the final 285 23:29.370 --> 23:33.250 closing div just below the carousel. 286 23:33.520 --> 23:41.140 And now when we go back you can see our carousel is nicely enclosed inside the container and you can 287 23:41.140 --> 23:49.120 see that no matter which size I change to, we've always got a consistent look with that container responsiveness. 288 23:49.630 --> 23:55.060 We're now ready for the final section of our website, which is just the footer. 289 23:55.060 --> 23:58.930 And I haven't done a lot of work on the footer, 290 23:58.930 --> 24:06.370 I've simply gone into the Snippets, found the Footers Section, picked one that I liked and then hit 291 24:06.370 --> 24:14.620 Inspect to find the starting point of the footer and pasted that code into the correct position. 292 24:14.890 --> 24:19.600 I'm not going to modify this too much because you already know how you can do that, but just look at 293 24:19.600 --> 24:27.580 how easy it was to create this beautiful website in a matter of minutes using Bootstrap Components. 294 24:28.000 --> 24:33.910 The Components are really, really handy, as are the Snippets and the Example code because they allow 295 24:33.910 --> 24:40.030 you to pick a style out of their palette that you like and simply add it into your website. 296 24:40.030 --> 24:46.570 And this makes it super easy to build well-thought out designs very, very quickly. 297 24:46.870 --> 24:53.110 In addition to the Layout classes that Bootstrap gives you the Component classes, there are also 298 24:53.110 --> 24:54.970 Utility classes and Helpers. 299 24:54.970 --> 24:59.470 And one really important aspect of this is Spacing. 300 24:59.590 --> 25:04.180 Very often when we're designing websites, we will want to add margin, we will want to add padding, 301 25:04.180 --> 25:06.220 and this is all spacing, right? 302 25:06.370 --> 25:14.770 As you might remember from previous lessons, padding sets up the part between the item and the containing 303 25:14.770 --> 25:15.160 div. 304 25:15.160 --> 25:25.660 So this part and the margin sets up the spacing between the outline of your item and any other components. 305 25:25.810 --> 25:30.610 So you can set all of those values using very simple Bootstrap notation. 306 25:30.610 --> 25:32.590 So let's run through this quickly. 307 25:32.590 --> 25:40.120 It's a format where you have the property, which sides you want, a dash and then the size. 308 25:40.120 --> 25:42.580 And this is really easy to figure out. 309 25:42.580 --> 25:50.110 So for example, if I wanted to set margin only to the top of my element, then I can say "mt". So 310 25:50.140 --> 25:52.150 M for classes that set margin. 311 25:52.180 --> 25:59.040 T that sets margin-top or padding-top and then using a dash, I can say how much margin I want. 312 25:59.050 --> 26:05.560 So 0 is eliminating the margin and then we can add a little bit more, a little bit more, a little 313 26:05.560 --> 26:06.070 bit more. 314 26:06.070 --> 26:11.080 So if I had mt - 5, that's usually the maximum that you'll need. 315 26:11.230 --> 26:15.580 And then there's this concept of X and Y. 316 26:15.610 --> 26:22.540 So if you want to set the margin for both the top and the bottom, you'll use the x-axis. 317 26:22.540 --> 26:28.900 And if you want to set the margin or padding for the left and the right, then you can use that y-axis. 318 26:28.900 --> 26:32.740 So maybe you'll have my-3. 319 26:32.890 --> 26:40.090 It looks like my 3, but it actually says, "Set the margin for the y-axis to a size of 3." 320 26:40.090 --> 26:45.940 It's relatively easy once you understand it, but when you just see it in the code, it can be really, 321 26:45.940 --> 26:46.870 really confusing. 322 26:46.870 --> 26:55.600 But now you should be able to see that in our footer we've got mb-2 and that of course stands for adding 323 26:55.600 --> 26:59.620 margin to the bottom 324 27:00.670 --> 27:03.790 and it's a size of 2. 325 27:04.090 --> 27:06.220 That's how we can decode all this. 326 27:07.210 --> 27:14.560 Now, the final neat trick I want to show you in this lesson is how you can add "Dark Mode" to your website, 327 27:14.590 --> 27:21.970 flipping the colors around by simply adding one property into your HTML tag. 328 27:22.120 --> 27:28.150 If you go into the Customize Section, go into Color modes, you'll see that Bootstrap now supports 329 27:28.150 --> 27:31.210 Dark mode and it can flip the entire 330 27:31.230 --> 27:38.610 project's theme to the opposite color, simply by setting the data bootstrap theme to dark (data-bs-theme="dark"). 331 27:38.910 --> 27:41.520 Let's try that out on our website. 332 27:41.820 --> 27:46.440 Let's go all the way up to our HTML after the language is set. 333 27:46.470 --> 27:53.880 Let's change the theme to "dark," and you can see our entire website has now been reformatted to a dark 334 27:53.880 --> 27:56.100 theme, which is super neat 335 27:56.100 --> 28:01.560 if this is the design that you want, or if later on when we learn about JavaScript and we can put in 336 28:01.560 --> 28:08.670 buttons to change the theme of our website to whichever the user prefers so that the user can change 337 28:08.670 --> 28:11.190 that theme to whichever they prefer. 338 28:11.670 --> 28:18.660 So now you're starting to see how powerful Bootstrap can be using these Examples, using Snippets, 339 28:18.660 --> 28:23.730 using the pre-built Components and Styling as well as the Layout System. 340 28:23.910 --> 28:29.280 But if you've tried to build websites before, you've probably come across full page themes completely 341 28:29.280 --> 28:30.410 built-out for you. 342 28:30.420 --> 28:33.120 For example, with Squarespace. 343 28:33.150 --> 28:39.000 The catch, though, is you're going to have to pay something like £12 a month or $10 a month in order 344 28:39.000 --> 28:45.390 to just be able to use these templates of theirs and to have your website on the Internet. 345 28:45.510 --> 28:51.390 What I want to show you is that with Bootstrap there are a whole bunch of free themes and paid for themes 346 28:51.390 --> 28:57.210 that you can use that are one-off costs for you to build beautiful websites and simply customize the 347 28:57.210 --> 28:57.790 themes 348 28:57.810 --> 29:04.860 now that you know all about Bootstrap. One handy template is from W3 schools and they have some of 349 29:04.860 --> 29:07.890 the most common website layouts like a blog. 350 29:07.890 --> 29:13.620 You might have a sidebar main, a footer or what a portfolio might look like or what a web page might 351 29:13.620 --> 29:14.160 look like. 352 29:14.190 --> 29:15.090 A social website. 353 29:15.090 --> 29:15.570 Etcetera. 354 29:15.570 --> 29:16.200 Etcetera. 355 29:16.200 --> 29:23.400 And they've built these simple examples for you to be able to simply take the code and customize. In 356 29:23.400 --> 29:25.500 order for you to use their examples, 357 29:25.500 --> 29:31.530 you can simply do, as we have done, find a template that you want to replicate and then customize 358 29:31.530 --> 29:36.390 it and maybe add some more custom CSS in order to achieve the look that you want. 359 29:36.510 --> 29:43.170 If you think that these are a little bit basic because they are, the idea is they're mostly for layout, 360 29:43.170 --> 29:47.940 getting the big structure done using the Bootstrap Layout System. 361 29:48.090 --> 29:54.330 There are a lot of other beautiful Bootstrap themes that are more complete in a way, starting with 362 29:54.330 --> 29:56.590 the official Bootstrap themes itself. 363 29:56.610 --> 30:00.000 If we head back to the main Bootstrap website, click on Themes, 364 30:00.000 --> 30:06.360 you can see that they've got these professionally designed websites and many of them look absolutely 365 30:06.360 --> 30:07.500 incredible. 366 30:07.500 --> 30:13.890 So depending on what it is that you're trying to build, you could use one of these templates. 367 30:13.890 --> 30:20.400 But the only downside to this is they are in fact all paid for because there's a lot of work that's 368 30:20.400 --> 30:21.600 gone into it, right? 369 30:21.750 --> 30:23.760 But these are mostly one-off costs, 370 30:23.760 --> 30:30.450 and if you don't want to pay to get a theme, you can always search through Google for free Bootstrap 371 30:30.480 --> 30:36.540 templates and you'll find a whole range of websites that have free and paid-for Bootstrap websites. 372 30:36.540 --> 30:40.590 And again, you can do the same thing as we've been doing so far in this lesson. 373 30:40.590 --> 30:46.200 Just getting hold of the components you want, customizing it, and getting the design that you were looking 374 30:46.200 --> 30:46.710 for. 375 30:47.520 --> 30:53.850 So hopefully in this lesson you've seen that Bootstrap can be incredibly easy to create components and 376 30:53.850 --> 31:00.210 features in our websites very, very quickly, and it has consistent and beautiful design to boot. 377 31:00.850 --> 31:06.360 And if you've really taken to Bootstrap and web design, you can even create and sell your own themes. 378 31:06.370 --> 31:12.430 If you really enjoy working with Bootstrap and designing websites and creating websites using the Bootstrap 379 31:12.430 --> 31:19.540 Components, you can create the templates yourself and put them onto marketplaces and sell them as a 380 31:19.540 --> 31:21.040 potential source of income. 381 31:21.040 --> 31:25.600 So have a play around with the other components, see what Bootstrap themes are out there. 382 31:25.600 --> 31:31.540 And in the next lesson, we've got the final project for this section where you're going to be building 383 31:31.570 --> 31:36.520 a fully-fledged startup website or by yourself using your knowledge of Bootstrap. 384 31:36.520 --> 31:39.100 So for all of that and more, I'll see you there.