1 00:00:00,270 --> 00:00:01,103 Instructor: Hey guys. 2 00:00:01,103 --> 00:00:02,670 In this lesson we're gonna be learning 3 00:00:02,670 --> 00:00:06,030 about one of the most powerful features of Bootstrap. 4 00:00:06,030 --> 00:00:07,350 And one of the biggest reasons 5 00:00:07,350 --> 00:00:09,300 why we would be using Bootstrap 6 00:00:09,300 --> 00:00:11,340 in our project in the first place. 7 00:00:11,340 --> 00:00:14,773 And that is the concept of the Bootstrap components, 8 00:00:14,773 --> 00:00:18,300 the pre-built, pre-styled components 9 00:00:18,300 --> 00:00:21,420 like buttons, and cards, and carousels. 10 00:00:21,420 --> 00:00:24,120 And a whole load of beautiful things that we get access 11 00:00:24,120 --> 00:00:29,120 to simply by adding in a Bootstrap class into our HTML. 12 00:00:29,760 --> 00:00:33,390 Let's start with one of the most commonly used components, 13 00:00:33,390 --> 00:00:35,730 which is the Bootstrap button. 14 00:00:35,730 --> 00:00:37,710 And this is a really good place to start 15 00:00:37,710 --> 00:00:42,180 because you also see the default Bootstrap styling 16 00:00:42,180 --> 00:00:43,710 and the color scheme. 17 00:00:43,710 --> 00:00:46,380 In most of the components that you'll get access 18 00:00:46,380 --> 00:00:49,210 to through Bootstrap, if you want to give it 19 00:00:49,210 --> 00:00:53,085 a particular color, it's really easy to access 20 00:00:53,085 --> 00:00:58,050 all of these default colors by simply using their name. 21 00:00:58,050 --> 00:01:00,930 In most cases, in a bootstrap designed website, 22 00:01:00,930 --> 00:01:05,930 the primary button, the go-to, the buy or the contact us 23 00:01:06,510 --> 00:01:09,780 or download whatever will be this blue color. 24 00:01:09,780 --> 00:01:13,380 And you can access all of the other colors through each of 25 00:01:13,380 --> 00:01:16,710 their bootstrap names and they give you a little bit 26 00:01:16,710 --> 00:01:18,990 of hint as to what they're used for. 27 00:01:18,990 --> 00:01:21,930 So success is usually like an okay button. 28 00:01:21,930 --> 00:01:23,790 Danger, maybe if you click this button 29 00:01:23,790 --> 00:01:27,810 something really bad happens or warning et cetera. 30 00:01:27,810 --> 00:01:32,058 And you get access to this button and this button styling 31 00:01:32,058 --> 00:01:36,840 simply by creating a button HTML element, 32 00:01:36,840 --> 00:01:40,620 giving it the class BTN for a bootstrap button. 33 00:01:40,620 --> 00:01:43,920 And then adding the class for the color scheme 34 00:01:43,920 --> 00:01:45,926 from this list that you wanna choose. 35 00:01:45,926 --> 00:01:47,940 Let's try this out. 36 00:01:47,940 --> 00:01:50,370 Go ahead and download the starting files 37 00:01:50,370 --> 00:01:54,090 from the 11.2 bootstrap components zip file. 38 00:01:54,090 --> 00:01:57,720 And once you've extracted and opened it inside VS Code, 39 00:01:57,720 --> 00:02:00,180 head over to index.html. 40 00:02:00,180 --> 00:02:02,160 Now here you'll notice that I've already added 41 00:02:02,160 --> 00:02:04,440 in the Bootstrap link. 42 00:02:04,440 --> 00:02:08,039 We've got a style section, which we can add custom CSS to. 43 00:02:08,039 --> 00:02:10,080 And in the body area, 44 00:02:10,080 --> 00:02:12,870 I want you to use the bootstrap documentation. 45 00:02:12,870 --> 00:02:15,090 So if you go to the bootstrap main website 46 00:02:15,090 --> 00:02:17,400 at getbootstrap.com, go to docs 47 00:02:17,400 --> 00:02:21,060 and then scroll down to the components, find the buttons. 48 00:02:21,060 --> 00:02:24,150 And I want you to put in a green button 49 00:02:24,150 --> 00:02:27,660 that says okay somewhere onto this website. 50 00:02:27,660 --> 00:02:29,910 Remember, you can preview it in real time 51 00:02:29,910 --> 00:02:33,420 to see if it's working and pause the video now 52 00:02:33,420 --> 00:02:34,983 and complete this challenge. 53 00:02:36,720 --> 00:02:38,880 All right, so this is pretty simple. 54 00:02:38,880 --> 00:02:42,546 We have a button which we said is going to say okay. 55 00:02:42,546 --> 00:02:45,510 And in order to style it using Bootstrap, 56 00:02:45,510 --> 00:02:49,110 the first thing we do is add the BTN class. 57 00:02:49,110 --> 00:02:51,030 And you can see automatically font changes, 58 00:02:51,030 --> 00:02:52,770 the background color changes. 59 00:02:52,770 --> 00:02:55,920 And then we said we wanted to have a green button. 60 00:02:55,920 --> 00:02:59,760 So the green button is btn-success. 61 00:02:59,760 --> 00:03:03,120 So let's go ahead and add btn-success. 62 00:03:03,120 --> 00:03:04,980 And once we're done, you can see we've got 63 00:03:04,980 --> 00:03:08,100 a beautiful green button with a hover animation 64 00:03:08,100 --> 00:03:11,760 with nice styling, a good size, rounded corners. 65 00:03:11,760 --> 00:03:15,390 All of that goodness without doing a lot of work at all. 66 00:03:15,390 --> 00:03:18,330 It was super, super simple to create this 67 00:03:18,330 --> 00:03:21,480 and this should give you a taste of what's yet to come. 68 00:03:21,480 --> 00:03:23,250 The next component I wanna talk about is 69 00:03:23,250 --> 00:03:26,130 a really useful one, which is the card 70 00:03:26,130 --> 00:03:29,430 which you already saw in the previous lesson's exercise. 71 00:03:29,430 --> 00:03:31,950 And as always, all we need to do is go 72 00:03:31,950 --> 00:03:34,350 to that particular component's page. 73 00:03:34,350 --> 00:03:36,558 And then we can simply copy the code, 74 00:03:36,558 --> 00:03:40,830 paste it into our website and replace certain parts 75 00:03:40,830 --> 00:03:44,040 of the code such as the image source or the alt text. 76 00:03:44,040 --> 00:03:46,410 Now, one component that you're probably gonna be using 77 00:03:46,410 --> 00:03:50,190 whenever you're building a website is a nav bar. 78 00:03:50,190 --> 00:03:52,140 And the bootstrap nav bars are some 79 00:03:52,140 --> 00:03:55,140 of the best designed nav bars I've seen. 80 00:03:55,140 --> 00:03:58,920 And it also is super easy to include, 81 00:03:58,920 --> 00:04:01,650 simply using their example snippet codes. 82 00:04:01,650 --> 00:04:03,840 If you head over to the nav bar, 83 00:04:03,840 --> 00:04:06,094 you can read on how it works. 84 00:04:06,094 --> 00:04:10,290 And also what some of the examples they have are. 85 00:04:10,290 --> 00:04:14,122 For example, this one with a search bar with some dropdowns. 86 00:04:14,122 --> 00:04:18,899 And this one which describes how you can have the brand at 87 00:04:18,899 --> 00:04:22,800 the top left or if you want an image, image and text brand. 88 00:04:22,800 --> 00:04:25,440 And you can scroll through this to find the kind of nav bar, 89 00:04:25,440 --> 00:04:29,621 you want to create and to use the example code. 90 00:04:29,621 --> 00:04:32,823 Now another area for the nav bars is if you head 91 00:04:32,823 --> 00:04:36,840 over to examples and you go to the header section, 92 00:04:36,840 --> 00:04:38,310 you can see some even more 93 00:04:38,310 --> 00:04:41,934 fancily laid out nav bars over here. 94 00:04:41,934 --> 00:04:45,292 In order to show you some of the different types 95 00:04:45,292 --> 00:04:49,140 of components and how they can be used in real life, 96 00:04:49,140 --> 00:04:53,970 we are going to be building a moving startups website. 97 00:04:53,970 --> 00:04:57,960 They're called Move It, which is pretty simple, 98 00:04:57,960 --> 00:04:59,670 and it's got a one-page website 99 00:04:59,670 --> 00:05:01,650 with many different sections. 100 00:05:01,650 --> 00:05:04,380 And I'm gonna show you just how easy it is to build 101 00:05:04,380 --> 00:05:06,930 this entire fully fledged website using 102 00:05:06,930 --> 00:05:09,000 just bootstrap components. 103 00:05:09,000 --> 00:05:11,340 So the first thing we need is that nav bar. 104 00:05:11,340 --> 00:05:14,280 And you'll notice that I've taken the nav bar 105 00:05:14,280 --> 00:05:17,190 that is pretty much this standard one. 106 00:05:17,190 --> 00:05:19,590 So it's got a field which you can search for, 107 00:05:19,590 --> 00:05:22,924 say the postcode if our company works in your area. 108 00:05:22,924 --> 00:05:25,230 It's got some dropdown menus. 109 00:05:25,230 --> 00:05:28,740 It's got some other little areas which you can click on. 110 00:05:28,740 --> 00:05:32,514 So let's go ahead and copy the code for the starting point 111 00:05:32,514 --> 00:05:37,514 of our nav bar and let's paste it into the body of our code. 112 00:05:39,596 --> 00:05:41,730 So you can see as soon as I've done that, 113 00:05:41,730 --> 00:05:43,740 I've got my nav bar show up. 114 00:05:43,740 --> 00:05:46,020 But one thing you'll notice as soon as you start playing 115 00:05:46,020 --> 00:05:49,500 around with it is when a bootstrap nav bar is 116 00:05:49,500 --> 00:05:53,100 in a smaller width, it will automatically show 117 00:05:53,100 --> 00:05:56,610 a hamburger menu and that menu should have 118 00:05:56,610 --> 00:06:00,210 a dropdown with all of the buttons from the navigation bar. 119 00:06:00,210 --> 00:06:03,295 Now why is our button not working? 120 00:06:03,295 --> 00:06:06,300 Now remember previously I said when we get started 121 00:06:06,300 --> 00:06:10,080 with Bootstrap, there's two links to include via CDN. 122 00:06:10,080 --> 00:06:12,390 The first one is the style sheet, 123 00:06:12,390 --> 00:06:14,520 and that gives us all of the styling. 124 00:06:14,520 --> 00:06:18,450 But the second one is the scripting code that gives us all 125 00:06:18,450 --> 00:06:21,168 of the functionality because this gives us access 126 00:06:21,168 --> 00:06:24,990 to the bootstrap JavaScript code. 127 00:06:24,990 --> 00:06:26,490 Now we don't need to understand anything 128 00:06:26,490 --> 00:06:29,160 about JavaScript just yet in order to use it. 129 00:06:29,160 --> 00:06:31,942 All we need to do is copy that link 130 00:06:31,942 --> 00:06:36,690 and go to right at the end just before the closing body tag. 131 00:06:36,690 --> 00:06:39,330 And paste that script link in there. 132 00:06:39,330 --> 00:06:40,950 And you can see, as soon as I've done that, 133 00:06:40,950 --> 00:06:43,950 my buttons now work, my dropdowns work. 134 00:06:43,950 --> 00:06:48,420 And all of these clicking functionality bits start working. 135 00:06:48,420 --> 00:06:52,698 And this again comes straight out of the box from Bootstrap. 136 00:06:52,698 --> 00:06:56,730 Let's take a look at this website in a larger format 137 00:06:56,730 --> 00:06:58,740 by opening it inside Chrome. 138 00:06:58,740 --> 00:07:00,300 You can see that for the most part, 139 00:07:00,300 --> 00:07:03,450 these two nav bars look pretty similar. 140 00:07:03,450 --> 00:07:05,880 All I did is got rid of some of the components 141 00:07:05,880 --> 00:07:07,710 and changed some of the other things. 142 00:07:07,710 --> 00:07:10,560 For example, this button is disabled 143 00:07:10,560 --> 00:07:13,110 so that users can't click on it. 144 00:07:13,110 --> 00:07:15,990 And in our version we actually just got rid of it. 145 00:07:15,990 --> 00:07:18,990 We can do that quite easily by finding that button. 146 00:07:18,990 --> 00:07:22,440 And you can see the reason why it's not enabled is 147 00:07:22,440 --> 00:07:24,960 because it has this class of disabled. 148 00:07:24,960 --> 00:07:26,790 So if we get rid of that, 149 00:07:26,790 --> 00:07:29,700 then you can see this button is now active once more. 150 00:07:29,700 --> 00:07:31,470 But we don't actually want it at all. 151 00:07:31,470 --> 00:07:35,100 So let's delete that entire list item. 152 00:07:35,100 --> 00:07:40,100 And now we only have three links, home, link and dropdown. 153 00:07:40,350 --> 00:07:43,923 So let's rename those links to about and services. 154 00:07:43,923 --> 00:07:47,520 And again, because this is just a simple anchor tag, 155 00:07:47,520 --> 00:07:50,670 you know exactly how to work with this. 156 00:07:50,670 --> 00:07:52,470 So the first one is link. 157 00:07:52,470 --> 00:07:54,693 So we'll change this to about. 158 00:07:55,977 --> 00:07:59,160 And the dropdown instead of reading dropdown 159 00:07:59,160 --> 00:08:01,710 we'll say is called services. 160 00:08:01,710 --> 00:08:03,900 And you can imagine in the future we would have 161 00:08:03,900 --> 00:08:05,910 our different services in the dropdown 162 00:08:05,910 --> 00:08:10,410 like moving with a van, moving by hauling 163 00:08:10,410 --> 00:08:12,630 everything yourself or something else. 164 00:08:12,630 --> 00:08:16,237 But this is just an example of how our nav bar could look. 165 00:08:16,237 --> 00:08:20,640 Now the first part of the nav bar is the nav bar brand 166 00:08:20,640 --> 00:08:25,170 and we can see that right up here we've got an anchor tag, 167 00:08:25,170 --> 00:08:27,210 which is called the nav bar brand. 168 00:08:27,210 --> 00:08:29,580 For example, if I change it to Move It, 169 00:08:29,580 --> 00:08:32,370 then that's going to change our brand text. 170 00:08:32,370 --> 00:08:35,520 In addition, we can also have a image in here 171 00:08:35,520 --> 00:08:39,030 so you can simply just add an image, give it a source. 172 00:08:39,030 --> 00:08:41,940 Maybe let's use one of the images we already have in 173 00:08:41,940 --> 00:08:44,970 our folder, for example, the dog.jpeg. 174 00:08:44,970 --> 00:08:48,120 Now, because this image is super, super large 175 00:08:48,120 --> 00:08:50,010 and we haven't really resized it. 176 00:08:50,010 --> 00:08:53,880 Then it's not really going to work in the nav bar, 177 00:08:53,880 --> 00:08:55,200 but you can always change this. 178 00:08:55,200 --> 00:08:57,750 So let's change the height to just 20 pixels. 179 00:08:57,750 --> 00:08:58,980 Then you can see our nav bar, 180 00:08:58,980 --> 00:09:01,410 brand image show up right there. 181 00:09:01,410 --> 00:09:03,930 Now in our case, we're not going to use an image. 182 00:09:03,930 --> 00:09:06,240 Instead, I'm gonna delete that tag 183 00:09:06,240 --> 00:09:08,707 and I'm gonna use an SVG. 184 00:09:08,707 --> 00:09:12,120 This is a good time to show you the SVGs, 185 00:09:12,120 --> 00:09:13,980 which are available through Bootstrap. 186 00:09:13,980 --> 00:09:17,040 So if you go back to the homepage and you click on icons, 187 00:09:17,040 --> 00:09:22,020 you can see you got all of these free icons for you to use 188 00:09:22,020 --> 00:09:25,890 in any of your websites, paid, monetized, whatever. 189 00:09:25,890 --> 00:09:27,240 And it's really hard 190 00:09:27,240 --> 00:09:30,150 actually sometimes finding well-designed icons 191 00:09:30,150 --> 00:09:33,060 that you can simply add to your project without having 192 00:09:33,060 --> 00:09:35,400 to pay royalties and buy it from a designer. 193 00:09:35,400 --> 00:09:37,861 So this is also really, really neat. 194 00:09:37,861 --> 00:09:41,850 And you can search through the different icons 195 00:09:41,850 --> 00:09:42,924 by using the filter. 196 00:09:42,924 --> 00:09:46,470 So the one that I found is actually this box 197 00:09:46,470 --> 00:09:48,990 with seams on it, which looks very much 198 00:09:48,990 --> 00:09:50,911 like a moving company box to me. 199 00:09:50,911 --> 00:09:54,097 And you can either simply just copy 200 00:09:54,097 --> 00:09:57,780 the SVG straight up into your HTML. 201 00:09:57,780 --> 00:09:58,740 So if I paste it in here, 202 00:09:58,740 --> 00:10:00,660 you'll see it show up right there. 203 00:10:00,660 --> 00:10:04,530 Alternatively, you can also include it as an image. 204 00:10:04,530 --> 00:10:07,380 And you set the source to the SVG 205 00:10:07,380 --> 00:10:10,696 that you have saved in your folder, which is right here. 206 00:10:10,696 --> 00:10:13,380 I'm gonna use the image in the folder 207 00:10:13,380 --> 00:10:15,290 by setting it as a source. 208 00:10:15,290 --> 00:10:20,290 And I'm gonna set the alt text to move it brand icon. 209 00:10:20,820 --> 00:10:24,900 And then I'm going to change the height to let's say 30, 210 00:10:24,900 --> 00:10:26,430 so that it's a little bit bigger. 211 00:10:26,430 --> 00:10:28,525 And we now have a nav bar that looks 212 00:10:28,525 --> 00:10:30,733 the same as the example. 213 00:10:30,733 --> 00:10:34,140 Now on the right hand side, there is a form here. 214 00:10:34,140 --> 00:10:36,570 And I know we haven't spoken much about forms. 215 00:10:36,570 --> 00:10:39,072 That's all yet to come when we learn more about how to have 216 00:10:39,072 --> 00:10:42,150 the actual form functionality later on. 217 00:10:42,150 --> 00:10:43,890 Especially in the backend section, 218 00:10:43,890 --> 00:10:46,350 this is all gonna come in really, really handy. 219 00:10:46,350 --> 00:10:49,050 But for now, we're just going to change this search bar 220 00:10:49,050 --> 00:10:53,426 from search to, say, postcode and check. 221 00:10:53,426 --> 00:10:55,470 So that's pretty easy to find. 222 00:10:55,470 --> 00:10:58,290 You can either use command F to find those words 223 00:10:58,290 --> 00:11:01,560 or you can scroll through your code to find it as well. 224 00:11:01,560 --> 00:11:03,807 Let's change the button to say check 225 00:11:03,807 --> 00:11:06,870 and let's change the placeholder 226 00:11:06,870 --> 00:11:10,443 for that search bar into, say, postcode. 227 00:11:11,901 --> 00:11:13,339 There we go. 228 00:11:13,339 --> 00:11:16,530 And now we've completed our nav bar. 229 00:11:16,530 --> 00:11:18,990 And if you had to design all of that from scratch 230 00:11:18,990 --> 00:11:21,420 and all of the CSS that's included, 231 00:11:21,420 --> 00:11:24,270 and you can see just how much CSS there is actually. 232 00:11:24,270 --> 00:11:26,640 If you click on one of these items, 233 00:11:26,640 --> 00:11:29,400 you can see the nav link that I just clicked on has 234 00:11:29,400 --> 00:11:33,365 all the padding defined, has all of this defined. 235 00:11:33,365 --> 00:11:36,510 Has toggle styling and that's just one part 236 00:11:36,510 --> 00:11:38,130 of this entire nav bar. 237 00:11:38,130 --> 00:11:40,895 So you can see just how much time we're saving ourselves 238 00:11:40,895 --> 00:11:44,340 and we're able to leverage a professional design 239 00:11:44,340 --> 00:11:45,870 and create something that looks 240 00:11:45,870 --> 00:11:48,600 really contemporary and beautiful. 241 00:11:48,600 --> 00:11:50,640 Now let's move on to the next section. 242 00:11:50,640 --> 00:11:54,000 And this entire section is made up of different components, 243 00:11:54,000 --> 00:11:56,964 so maybe an H1 heading, a paragraph, 244 00:11:56,964 --> 00:11:59,280 two buttons and an image. 245 00:11:59,280 --> 00:12:02,010 But if we want to just take this layout, 246 00:12:02,010 --> 00:12:04,466 I actually got it from the examples. 247 00:12:04,466 --> 00:12:06,960 The examples area is really, really good 248 00:12:06,960 --> 00:12:11,100 for taking bits and bobs of the different code snippets, 249 00:12:11,100 --> 00:12:13,980 different components that they've already styled 250 00:12:13,980 --> 00:12:16,680 and created for you and simply putting it 251 00:12:16,680 --> 00:12:20,010 into your website where it makes sense. 252 00:12:20,010 --> 00:12:24,360 So this is a hero, and as you can see, it's this one. 253 00:12:24,360 --> 00:12:25,920 It's pretty much exactly the same, 254 00:12:25,920 --> 00:12:29,580 title, text, two buttons and an image. 255 00:12:29,580 --> 00:12:32,820 And everything is styled beautifully already for you. 256 00:12:32,820 --> 00:12:33,750 In order to use it, 257 00:12:33,750 --> 00:12:37,307 all we need to do is right click on inspect. 258 00:12:37,307 --> 00:12:41,352 And now we want to expand our elements area. 259 00:12:41,352 --> 00:12:46,352 And what I tend to do is just to go upwards on the hover 260 00:12:46,515 --> 00:12:49,560 until the highlight actually highlights 261 00:12:49,560 --> 00:12:53,250 the area that I want, which is this div right here. 262 00:12:53,250 --> 00:12:55,872 Let's go ahead and copy this div 263 00:12:55,872 --> 00:12:59,990 and put it into our code just below our nav bar. 264 00:12:59,990 --> 00:13:01,950 Now, once I've done that, 265 00:13:01,950 --> 00:13:04,560 you can see we've got our centered screenshot, 266 00:13:04,560 --> 00:13:07,350 text, button and an image. 267 00:13:07,350 --> 00:13:09,600 Let's first fix that image so we can see 268 00:13:09,600 --> 00:13:11,880 what things should look like. 269 00:13:11,880 --> 00:13:15,240 And their source is from the bootstrap docs, 270 00:13:15,240 --> 00:13:19,768 but instead we want to use the one of the moving van. 271 00:13:19,768 --> 00:13:21,840 So that we can show our users 272 00:13:21,840 --> 00:13:24,810 what our services are all about. 273 00:13:24,810 --> 00:13:28,195 And now all we have to do is just to replace the text. 274 00:13:28,195 --> 00:13:31,530 If you look inside the starting file folder, 275 00:13:31,530 --> 00:13:34,740 there is a file called website text. 276 00:13:34,740 --> 00:13:38,698 And here you can simply copy all of the website text 277 00:13:38,698 --> 00:13:41,323 and replace the relevant parts. 278 00:13:41,323 --> 00:13:44,433 The H1 should say move with joy. 279 00:13:44,433 --> 00:13:47,520 And then we've got a long bit of text, 280 00:13:47,520 --> 00:13:50,880 which we're going to replace with our paragraph. 281 00:13:50,880 --> 00:13:52,706 So let's just copy everything 282 00:13:52,706 --> 00:13:56,250 in that paragraph element and replace it. 283 00:13:56,250 --> 00:14:00,663 And then our buttons should say, get a quote and contact us. 284 00:14:04,590 --> 00:14:09,210 And now we have a hero section done in two seconds. 285 00:14:09,210 --> 00:14:10,950 Okay, maybe it was a little bit longer, 286 00:14:10,950 --> 00:14:14,190 but you can probably see just how powerful this is. 287 00:14:14,190 --> 00:14:15,540 So now let's keep going. 288 00:14:15,540 --> 00:14:18,060 In the next section of our example website, 289 00:14:18,060 --> 00:14:19,320 we've got some features. 290 00:14:19,320 --> 00:14:21,690 And this is where you would usually tell people 291 00:14:21,690 --> 00:14:24,360 what's so special about your particular startup. 292 00:14:24,360 --> 00:14:26,790 Well, our startup is really professional. 293 00:14:26,790 --> 00:14:30,106 We are available countrywide and we have a personal touch. 294 00:14:30,106 --> 00:14:32,760 And you might have guessed this comes 295 00:14:32,760 --> 00:14:34,859 from the Bootstrap examples page. 296 00:14:34,859 --> 00:14:37,860 They have a section called features 297 00:14:37,860 --> 00:14:41,520 and this first feature is perfect for our needs. 298 00:14:41,520 --> 00:14:44,100 And I think a lot of bootstrap design kind of comes 299 00:14:44,100 --> 00:14:47,190 from Apple because when you look at the Apple website, 300 00:14:47,190 --> 00:14:51,523 a lot of the buttons, the shading, the kind of fonts, 301 00:14:51,523 --> 00:14:53,910 they all look really, really similar 302 00:14:53,910 --> 00:14:55,680 to the Bootstrap components. 303 00:14:55,680 --> 00:14:57,930 And I think this is probably one 304 00:14:57,930 --> 00:14:59,580 of their design inspirations. 305 00:14:59,580 --> 00:15:03,000 And we can get that simply with some copy 306 00:15:03,000 --> 00:15:06,390 and pasting and a little bit of customization. 307 00:15:06,390 --> 00:15:09,810 Again, let's go into the section of the features 308 00:15:09,810 --> 00:15:13,230 that we want and then we're going to keep hovering up 309 00:15:13,230 --> 00:15:16,181 until we find the div that contains 310 00:15:16,181 --> 00:15:18,180 all the things that we want. 311 00:15:18,180 --> 00:15:20,154 Right click copy, copy element 312 00:15:20,154 --> 00:15:24,660 and we're going to put it below the previous section. 313 00:15:24,660 --> 00:15:26,850 Now let's take a look at our good work. 314 00:15:26,850 --> 00:15:28,890 We have our columns with icons 315 00:15:28,890 --> 00:15:31,243 and we've got three features. 316 00:15:31,243 --> 00:15:34,912 Let's change the text of all of this first 317 00:15:34,912 --> 00:15:37,440 and I'm gonna fast forward through this section 318 00:15:37,440 --> 00:15:39,490 so you don't have to watch me copy paste. 319 00:15:45,180 --> 00:15:46,350 And there you have it. 320 00:15:46,350 --> 00:15:48,330 We've now got all the texts replaced 321 00:15:48,330 --> 00:15:51,930 and we should have all of our copy, 322 00:15:51,930 --> 00:15:54,764 which is the text for your website inserted 323 00:15:54,764 --> 00:15:57,091 into the relevant parts. 324 00:15:57,091 --> 00:16:00,754 Now, one thing that you'll notice is very obvious is 325 00:16:00,754 --> 00:16:03,742 that this part does not look like this part. 326 00:16:03,742 --> 00:16:05,700 And it also doesn't look like the part 327 00:16:05,700 --> 00:16:07,230 that we copied the code from. 328 00:16:07,230 --> 00:16:09,300 So what is going on here? 329 00:16:09,300 --> 00:16:12,960 Well, as I mentioned, most of the bootstrap styling 330 00:16:12,960 --> 00:16:16,050 and components come from bootstrap classes. 331 00:16:16,050 --> 00:16:17,850 For example, this one looks like this 332 00:16:17,850 --> 00:16:19,860 because it has a class of icon link. 333 00:16:19,860 --> 00:16:23,618 But sometimes, sometimes we might want to customize 334 00:16:23,618 --> 00:16:27,000 the styling that we get so that we have 335 00:16:27,000 --> 00:16:28,500 some of our own design features 336 00:16:28,500 --> 00:16:31,890 on top of what Bootstrap already addresses. 337 00:16:31,890 --> 00:16:35,576 If we right click on these styled squares 338 00:16:35,576 --> 00:16:40,050 from the example website, and if you scroll up to find 339 00:16:40,050 --> 00:16:43,470 the div where it highlights the entire square, 340 00:16:43,470 --> 00:16:45,780 you can see that this div actually has 341 00:16:45,780 --> 00:16:47,876 some custom styling. 342 00:16:47,876 --> 00:16:50,040 Now, the reason why we know it's custom is 343 00:16:50,040 --> 00:16:52,920 because all of the default bootstrap classes come 344 00:16:52,920 --> 00:16:55,961 from something like utilities.scss. 345 00:16:55,961 --> 00:16:58,320 For example, the background gradient. 346 00:16:58,320 --> 00:17:01,590 For example, the margins, the align, et cetera. 347 00:17:01,590 --> 00:17:04,470 But the parts that come from custom CSS 348 00:17:04,470 --> 00:17:08,550 for this page is going to have a file that looks like this. 349 00:17:08,550 --> 00:17:10,829 So for this features page, 350 00:17:10,829 --> 00:17:13,140 they've created some custom CSS. 351 00:17:13,140 --> 00:17:15,270 And in that custom CSS file, 352 00:17:15,270 --> 00:17:19,109 they've got little bits of CSS just to make things look 353 00:17:19,109 --> 00:17:23,730 a little bit more custom rather than coming from Bootstrap. 354 00:17:23,730 --> 00:17:26,190 So the part that we are missing, as you can see, 355 00:17:26,190 --> 00:17:28,860 is something called feature icon. 356 00:17:28,860 --> 00:17:33,860 So if we copy all of the CSS and put it into our CSS here 357 00:17:34,470 --> 00:17:38,790 between the style tags, then we look at our website, 358 00:17:38,790 --> 00:17:43,022 we can see those squares styled the way we want. 359 00:17:43,022 --> 00:17:48,022 Now what we're gonna have to do is to remove the SVG 360 00:17:48,150 --> 00:17:50,850 in the examples and replace it with 361 00:17:50,850 --> 00:17:53,390 our own SVGs that we've downloaded. 362 00:17:53,390 --> 00:17:57,598 So let's go ahead and find the first one, which is here. 363 00:17:57,598 --> 00:18:00,870 Let's go ahead and delete this and simply add an image 364 00:18:00,870 --> 00:18:04,380 with the source set as the first one, 365 00:18:04,380 --> 00:18:06,995 which is the briefcase, 366 00:18:06,995 --> 00:18:09,930 because we're saying how professional we are. 367 00:18:09,930 --> 00:18:14,930 So let's change the alt text and the second SVG will replace 368 00:18:16,132 --> 00:18:20,324 with the image that is the bus front. 369 00:18:20,324 --> 00:18:22,770 And this is because we're saying 370 00:18:22,770 --> 00:18:25,461 that our services are available countrywide. 371 00:18:25,461 --> 00:18:29,460 And then for the final feature icon, 372 00:18:29,460 --> 00:18:34,460 we're going to change it to the chat square heart 373 00:18:34,530 --> 00:18:38,880 to say how much of a personal touch our company has. 374 00:18:38,880 --> 00:18:42,529 And now we should have all of the icons set up, 375 00:18:42,529 --> 00:18:45,210 but there're a little bit small. 376 00:18:45,210 --> 00:18:48,300 So in order to get it to the right size, 377 00:18:48,300 --> 00:18:51,900 we'll do the same thing that we did with the icon up there. 378 00:18:51,900 --> 00:18:54,142 We'll give it a different height. 379 00:18:54,142 --> 00:18:58,234 So let's go ahead and add a height of 30 380 00:18:58,234 --> 00:19:02,081 to each of these SVGs. 381 00:19:02,081 --> 00:19:05,220 And now they are all correctly sized. 382 00:19:05,220 --> 00:19:07,680 And while you've been doing the copy and pasting, 383 00:19:07,680 --> 00:19:10,020 you might notice there's another SVG here, 384 00:19:10,020 --> 00:19:12,030 which is the chevron right, 385 00:19:12,030 --> 00:19:15,180 which is this little forward button here. 386 00:19:15,180 --> 00:19:18,477 We can also replace that with our images, 387 00:19:18,477 --> 00:19:21,990 which the chevron right. 388 00:19:21,990 --> 00:19:26,880 And we'll give it an alt text and copy and paste 389 00:19:26,880 --> 00:19:29,853 this to all three places where they exist. 390 00:19:31,980 --> 00:19:35,850 Now, the reason why the SVGs that we copied 391 00:19:35,850 --> 00:19:40,850 from the features section doesn't work on our website is 392 00:19:41,040 --> 00:19:44,580 because SVGs can be installed in many different ways. 393 00:19:44,580 --> 00:19:47,970 We can download it just as I have done 394 00:19:47,970 --> 00:19:51,480 and put them into the project folder. 395 00:19:51,480 --> 00:19:53,820 And you can access it through the SVG element 396 00:19:53,820 --> 00:19:55,697 or through an image element. 397 00:19:55,697 --> 00:20:00,540 Alternatively, you can simply copy the entire HTML code. 398 00:20:00,540 --> 00:20:02,670 For a clean look, I've simply downloaded 399 00:20:02,670 --> 00:20:05,820 each of the SVGs into our resources folder 400 00:20:05,820 --> 00:20:07,680 and added them as images. 401 00:20:07,680 --> 00:20:10,654 It really is up to you how you want to do it. 402 00:20:10,654 --> 00:20:13,890 Now that you've seen a little bit about how we can use 403 00:20:13,890 --> 00:20:17,640 the different code snippets from the bootstrap components 404 00:20:17,640 --> 00:20:22,230 or from bootstrap examples, I've got a exercise for you. 405 00:20:22,230 --> 00:20:23,670 We know that the next section 406 00:20:23,670 --> 00:20:27,090 after features is our carousel. 407 00:20:27,090 --> 00:20:29,580 And it's simply a component that allows you 408 00:20:29,580 --> 00:20:31,890 to scroll through different pages. 409 00:20:31,890 --> 00:20:34,680 Now, the one that I've chosen here has an indicator 410 00:20:34,680 --> 00:20:37,230 at the bottom, so you can easily switch 411 00:20:37,230 --> 00:20:39,030 to whichever page you want. 412 00:20:39,030 --> 00:20:42,360 It's got the side buttons here so you can go left and right. 413 00:20:42,360 --> 00:20:45,600 And all it has are just three large images, 414 00:20:45,600 --> 00:20:48,120 but be aware that the images don't go 415 00:20:48,120 --> 00:20:49,530 all the way to the edge. 416 00:20:49,530 --> 00:20:53,520 Instead they are aligned with the rest of the content. 417 00:20:53,520 --> 00:20:55,830 So have a think about what you've learned before, 418 00:20:55,830 --> 00:20:59,370 have a read of the carousel documentation. 419 00:20:59,370 --> 00:21:01,380 Find the example that you think looks 420 00:21:01,380 --> 00:21:03,889 the most like the outcome 421 00:21:03,889 --> 00:21:06,540 and see if you can complete this challenge. 422 00:21:06,540 --> 00:21:07,683 Pause the video now. 423 00:21:08,559 --> 00:21:11,790 All right, if you completed this challenge successfully, 424 00:21:11,790 --> 00:21:13,920 we've now got another section here 425 00:21:13,920 --> 00:21:16,680 which is a bootstrap carousel. 426 00:21:16,680 --> 00:21:18,540 Which is really neat when you want to display 427 00:21:18,540 --> 00:21:22,080 some gallery images or maybe you have some testimonials 428 00:21:22,080 --> 00:21:24,360 you want users to be able to flip through. 429 00:21:24,360 --> 00:21:27,330 Maybe you wanna show all the members of your team. 430 00:21:27,330 --> 00:21:30,300 And if you look inside the carousel example here, 431 00:21:30,300 --> 00:21:33,780 you can see there's an example with different text. 432 00:21:33,780 --> 00:21:35,520 But the example that I use is 433 00:21:35,520 --> 00:21:37,110 actually even simpler than that. 434 00:21:37,110 --> 00:21:39,900 It's in the docs inside the components. 435 00:21:39,900 --> 00:21:42,300 So going back to the components now, 436 00:21:42,300 --> 00:21:44,850 we can take a look at how the carousel works 437 00:21:44,850 --> 00:21:46,380 if you wanna have a read. 438 00:21:46,380 --> 00:21:48,840 But I've chosen one of the basic examples, 439 00:21:48,840 --> 00:21:52,440 which has an indicator where you can toggle 440 00:21:52,440 --> 00:21:54,630 to different pages and we simply have 441 00:21:54,630 --> 00:21:57,900 a big image covering the entire carousel. 442 00:21:57,900 --> 00:22:02,900 Let's copy this code and paste it into our website. 443 00:22:03,031 --> 00:22:06,960 Now when you paste it, you won't see anything happen at all. 444 00:22:06,960 --> 00:22:09,510 And the reason is because there's no images, 445 00:22:09,510 --> 00:22:11,162 the images are broken. 446 00:22:11,162 --> 00:22:15,330 And that's because the images have no source set by default. 447 00:22:15,330 --> 00:22:18,450 So let's go ahead and set our carousel image source. 448 00:22:18,450 --> 00:22:22,167 So the first one we're gonna set to the couple 449 00:22:22,167 --> 00:22:27,167 and the second one we're gonna set as the dog. 450 00:22:33,030 --> 00:22:36,210 This is almost like an evolution of a family going 451 00:22:36,210 --> 00:22:40,020 from a couple to a dog to a family. 452 00:22:40,020 --> 00:22:44,190 And finally, we have all of our photos set up. 453 00:22:44,190 --> 00:22:45,570 And now if we take a look, 454 00:22:45,570 --> 00:22:49,015 you can see our carousel is showing and it's working. 455 00:22:49,015 --> 00:22:53,040 But it's maybe a little bit too big. 456 00:22:53,040 --> 00:22:56,550 It's kind of taking up more than the height of the website 457 00:22:56,550 --> 00:22:59,853 and that's because this is set to cover the entire width. 458 00:22:59,853 --> 00:23:02,430 If you remember from previous lessons, 459 00:23:02,430 --> 00:23:07,385 one of the best components to size everything evenly is 460 00:23:07,385 --> 00:23:12,360 from the layout section and it is our container. 461 00:23:12,360 --> 00:23:14,400 We know that we're gonna get a uniform look 462 00:23:14,400 --> 00:23:17,730 if we put things inside a container div. 463 00:23:17,730 --> 00:23:19,740 So that's exactly what we're gonna do. 464 00:23:19,740 --> 00:23:22,590 I'm gonna create a div and I'm going 465 00:23:22,590 --> 00:23:25,837 to set it to class of container. 466 00:23:25,837 --> 00:23:30,480 And I'm going to move the final closing div 467 00:23:30,480 --> 00:23:33,241 just below the carousel. 468 00:23:33,241 --> 00:23:37,830 And now when we go back, you can see our carousel is 469 00:23:37,830 --> 00:23:40,680 nicely enclosed inside the container. 470 00:23:40,680 --> 00:23:43,800 And you can see that no matter which size I change to, 471 00:23:43,800 --> 00:23:46,560 we've always got a consistent look 472 00:23:46,560 --> 00:23:49,740 with that container responsiveness. 473 00:23:49,740 --> 00:23:53,250 We're now ready for the final section of our website, 474 00:23:53,250 --> 00:23:55,380 which is just the footer. 475 00:23:55,380 --> 00:23:58,920 And I haven't done a lot of work on the footer. 476 00:23:58,920 --> 00:24:01,530 I've simply gone into the snippets, 477 00:24:01,530 --> 00:24:04,890 found the footer section, picked one that I liked. 478 00:24:04,890 --> 00:24:09,300 And then hit inspect to find the starting point 479 00:24:09,300 --> 00:24:12,240 of the footer and pasted that code 480 00:24:12,240 --> 00:24:14,850 into the correct position. 481 00:24:14,850 --> 00:24:16,410 I'm not gonna modify this too much 482 00:24:16,410 --> 00:24:18,720 because you already know how you can do that. 483 00:24:18,720 --> 00:24:21,300 But just look at how easy it was to create 484 00:24:21,300 --> 00:24:24,060 this beautiful website in a matter 485 00:24:24,060 --> 00:24:27,728 of minutes using bootstrap components. 486 00:24:27,728 --> 00:24:30,150 The components are really, really handy 487 00:24:30,150 --> 00:24:33,150 as are the snippets and the example code. 488 00:24:33,150 --> 00:24:36,630 Because they allow you to pick a style out of their palette 489 00:24:36,630 --> 00:24:40,230 that you like and simply add it into your website. 490 00:24:40,230 --> 00:24:43,260 And this makes it super easy to build 491 00:24:43,260 --> 00:24:46,766 well-thought out designs very, very quickly. 492 00:24:46,766 --> 00:24:49,860 In addition to the layout classes 493 00:24:49,860 --> 00:24:52,440 that Bootstrap gives you, the component classes, 494 00:24:52,440 --> 00:24:54,884 there are also utility classes and helpers. 495 00:24:54,884 --> 00:24:59,318 And one really important aspect of this is spacing. 496 00:24:59,318 --> 00:25:01,620 Very often when we're designing websites, 497 00:25:01,620 --> 00:25:04,290 we'll want to add margin, we'll want to add padding, 498 00:25:04,290 --> 00:25:06,099 and this is all spacing. 499 00:25:06,099 --> 00:25:09,240 As you might remember from previous lessons, 500 00:25:09,240 --> 00:25:13,260 padding sets up the part between the item 501 00:25:13,260 --> 00:25:15,180 and the containing div. 502 00:25:15,180 --> 00:25:20,180 So this part and the margin sets up the spacing 503 00:25:20,375 --> 00:25:25,375 between the outline of your item and any other components. 504 00:25:25,406 --> 00:25:28,710 So you can set all of those values using 505 00:25:28,710 --> 00:25:30,870 very simple bootstrap notation. 506 00:25:30,870 --> 00:25:32,760 So let's run through this quickly. 507 00:25:32,760 --> 00:25:36,175 It's a format where you have the property, 508 00:25:36,175 --> 00:25:40,350 which sides you want, a dash, and then the size. 509 00:25:40,350 --> 00:25:42,540 And this is really easy to figure out. 510 00:25:42,540 --> 00:25:45,690 So for example, if I wanted to set margin 511 00:25:45,690 --> 00:25:49,740 only to the top of my element, then I can say mt. 512 00:25:49,740 --> 00:25:52,290 So M for classes that set margin, 513 00:25:52,290 --> 00:25:55,620 T that sets margin top or padding top. 514 00:25:55,620 --> 00:25:58,980 And then using a dash, I can say how much margin I want. 515 00:25:58,980 --> 00:26:02,340 So zero is eliminating the margin, 516 00:26:02,340 --> 00:26:04,680 and then we can add a little bit more, 517 00:26:04,680 --> 00:26:06,000 a little bit more, a little bit more. 518 00:26:06,000 --> 00:26:08,610 So if I had margin top five, 519 00:26:08,610 --> 00:26:11,023 that's usually the maximum that you'll need. 520 00:26:11,023 --> 00:26:15,720 And then there's this concept of X and Y. 521 00:26:15,720 --> 00:26:18,720 So if you want to set the margin 522 00:26:18,720 --> 00:26:22,270 for both the top and the bottom, you'll use the X axis. 523 00:26:22,270 --> 00:26:25,470 And if you wanna set the margin or padding for the left 524 00:26:25,470 --> 00:26:28,920 and the right, then you can use that Y axis. 525 00:26:28,920 --> 00:26:33,920 So maybe you'll have my-3, it looks like my three, 526 00:26:34,710 --> 00:26:36,930 but it actually set the margin 527 00:26:36,930 --> 00:26:40,260 for the Y axis to a size of three. 528 00:26:40,260 --> 00:26:43,080 It's relatively easy once you understand it. 529 00:26:43,080 --> 00:26:44,850 But when you just see it in the code, 530 00:26:44,850 --> 00:26:46,860 it can be really, really confusing. 531 00:26:46,860 --> 00:26:48,450 But now you should be able to see 532 00:26:48,450 --> 00:26:52,472 that in our footer we've got mb-2. 533 00:26:52,472 --> 00:26:57,472 And that, of course, stands for adding margin to the bottom 534 00:27:00,990 --> 00:27:03,815 and it's a size of two. 535 00:27:03,815 --> 00:27:06,123 That's how we can decode all this. 536 00:27:07,470 --> 00:27:10,710 Now, the final neat trick I wanna show you in this lesson is 537 00:27:10,710 --> 00:27:14,700 how you can add dark mode to your website, 538 00:27:14,700 --> 00:27:19,560 flipping the colors around by simply adding one property 539 00:27:19,560 --> 00:27:22,290 into your HTML tag. 540 00:27:22,290 --> 00:27:25,410 If you go into the customized section, go into color modes, 541 00:27:25,410 --> 00:27:29,610 you'll see that Bootstrap now supports dark mode. 542 00:27:29,610 --> 00:27:32,146 And it can flip the entire project's theme 543 00:27:32,146 --> 00:27:35,340 to the opposite color simply by setting 544 00:27:35,340 --> 00:27:39,150 the data bootstrap theme to dark. 545 00:27:39,150 --> 00:27:42,090 Let's try that out on our website. 546 00:27:42,090 --> 00:27:44,640 Let's go all the way up to our HTML. 547 00:27:44,640 --> 00:27:48,450 After the language is set, let's change the theme to dark. 548 00:27:48,450 --> 00:27:50,790 And you can see our entire website has 549 00:27:50,790 --> 00:27:54,960 now been reformatted to a dark theme, 550 00:27:54,960 --> 00:27:58,470 which is super neat if this is the design that you want. 551 00:27:58,470 --> 00:28:00,900 Or if later on when we learn about JavaScript 552 00:28:00,900 --> 00:28:05,610 and we can put in buttons to change the theme of our website 553 00:28:05,610 --> 00:28:07,380 to whichever the user prefers. 554 00:28:07,380 --> 00:28:09,570 So that the user can change that theme 555 00:28:09,570 --> 00:28:11,970 to whichever they prefer. 556 00:28:11,970 --> 00:28:13,740 So now you're starting to see 557 00:28:13,740 --> 00:28:16,530 how powerful Bootstrap can be using 558 00:28:16,530 --> 00:28:18,720 these examples, using snippets, 559 00:28:18,720 --> 00:28:21,990 using the pre-built components and styling 560 00:28:21,990 --> 00:28:24,180 as well as the layout system. 561 00:28:24,180 --> 00:28:26,280 But if you've tried to build websites before, 562 00:28:26,280 --> 00:28:28,740 you've probably come across full page themes 563 00:28:28,740 --> 00:28:33,270 completely built out for you, for example, with Squarespace. 564 00:28:33,270 --> 00:28:35,700 The catch though is you're gonna have to pay something 565 00:28:35,700 --> 00:28:38,490 like 12 pounds a month or $10 a month 566 00:28:38,490 --> 00:28:41,220 in order to just be able to use these templates 567 00:28:41,220 --> 00:28:45,630 of theirs and to have your website on the internet. 568 00:28:45,630 --> 00:28:48,300 What I wanna show you is that with Bootstrap, 569 00:28:48,300 --> 00:28:51,510 there are a whole bunch of free themes and paid for themes 570 00:28:51,510 --> 00:28:53,730 that you can use that are one-off costs 571 00:28:53,730 --> 00:28:55,680 for you to build beautiful websites. 572 00:28:55,680 --> 00:28:57,900 And simply customize the themes 573 00:28:57,900 --> 00:28:59,932 now that you know all about Bootstrap. 574 00:28:59,932 --> 00:29:03,510 One handy template is from W3Schools. 575 00:29:03,510 --> 00:29:05,190 And they have some of the most 576 00:29:05,190 --> 00:29:07,860 common website layouts like a blog. 577 00:29:07,860 --> 00:29:10,380 You might have a sidebar, main, a footer, 578 00:29:10,380 --> 00:29:12,420 or what a portfolio might look like 579 00:29:12,420 --> 00:29:14,190 or what a webpage might look like, 580 00:29:14,190 --> 00:29:16,290 a social website, et cetera, et cetera. 581 00:29:16,290 --> 00:29:18,270 And they've built these simple examples 582 00:29:18,270 --> 00:29:22,323 for you to be able to simply take the code and customize. 583 00:29:23,190 --> 00:29:25,500 In order for you to use their examples, 584 00:29:25,500 --> 00:29:28,860 you can simply do as we have done, find a template 585 00:29:28,860 --> 00:29:31,680 that you wanna replicate and then customize it. 586 00:29:31,680 --> 00:29:34,380 And maybe add some more custom CSS in order 587 00:29:34,380 --> 00:29:36,660 to achieve the look that you want. 588 00:29:36,660 --> 00:29:39,000 If you think that these are a little bit basic 589 00:29:39,000 --> 00:29:43,140 because they are, the idea is they're mostly for layout, 590 00:29:43,140 --> 00:29:46,080 getting the big structure done using 591 00:29:46,080 --> 00:29:47,969 the bootstrap layout system. 592 00:29:47,969 --> 00:29:50,433 There are a lot of other beautiful bootstrap themes 593 00:29:50,433 --> 00:29:53,460 that are more complete in a way, 594 00:29:53,460 --> 00:29:56,700 starting with the official Bootstrap themes itself. 595 00:29:56,700 --> 00:29:58,920 If we head back to the main bootstrap website, 596 00:29:58,920 --> 00:30:01,140 click on themes, you can see that they've got 597 00:30:01,140 --> 00:30:03,429 these professionally designed websites. 598 00:30:03,429 --> 00:30:07,470 And many of them look absolutely incredible. 599 00:30:07,470 --> 00:30:10,770 So depending on what it is that you are trying to build, 600 00:30:10,770 --> 00:30:13,739 you could use one of these templates. 601 00:30:13,739 --> 00:30:18,180 But the only downside to this is they are in fact all paid 602 00:30:18,180 --> 00:30:21,410 for because there's a lot of work that's gone into it. 603 00:30:21,410 --> 00:30:23,850 But these are mostly one-off costs. 604 00:30:23,850 --> 00:30:26,829 And if you don't want to pay to get a theme, 605 00:30:26,829 --> 00:30:29,010 you can always search through Google 606 00:30:29,010 --> 00:30:31,530 for free bootstrap templates. 607 00:30:31,530 --> 00:30:33,810 And you'll find a whole range of websites 608 00:30:33,810 --> 00:30:36,344 that have free and paid for Bootstrap websites. 609 00:30:36,344 --> 00:30:38,430 And again, you can do the same thing 610 00:30:38,430 --> 00:30:40,650 as we've been doing so far in this lesson. 611 00:30:40,650 --> 00:30:43,050 Just getting hold of the components you want, 612 00:30:43,050 --> 00:30:45,300 customizing it and getting the design 613 00:30:45,300 --> 00:30:46,623 that you are looking for. 614 00:30:47,730 --> 00:30:49,440 So hopefully in this lesson you've seen 615 00:30:49,440 --> 00:30:52,080 that Bootstrap can be incredibly easy 616 00:30:52,080 --> 00:30:54,240 to create components and features 617 00:30:54,240 --> 00:30:56,520 in our websites very, very quickly. 618 00:30:56,520 --> 00:31:00,930 And it has consistent and beautiful design to boot. 619 00:31:00,930 --> 00:31:04,020 And if you've really taken to bootstrap and web design, 620 00:31:04,020 --> 00:31:06,540 you can even create and sell your own themes. 621 00:31:06,540 --> 00:31:08,730 If you really enjoy working with Bootstrap 622 00:31:08,730 --> 00:31:11,940 and designing websites and creating websites using 623 00:31:11,940 --> 00:31:13,470 the Bootstrap components, 624 00:31:13,470 --> 00:31:16,320 you can create the templates yourself. 625 00:31:16,320 --> 00:31:18,330 And put them onto marketplaces 626 00:31:18,330 --> 00:31:21,240 and sell them as a potential source of income. 627 00:31:21,240 --> 00:31:23,580 So have a play around with the other components, 628 00:31:23,580 --> 00:31:25,890 see what Bootstrap themes are out there. 629 00:31:25,890 --> 00:31:28,800 And in the next lesson, we've got the final project 630 00:31:28,800 --> 00:31:31,590 for this section where you're going to be building 631 00:31:31,590 --> 00:31:33,660 a fully fledged starter website 632 00:31:33,660 --> 00:31:36,750 all by yourself using your knowledge of Bootstrap. 633 00:31:36,750 --> 00:31:39,213 So for all of that and more, I'll see you there.