WEBVTT 0 00:00.260 --> 00:00.920 Hey, guys. 1 00:00.920 --> 00:04.780 In this section, we're going to be learning about the Bootstrap Framework. 2 00:04.790 --> 00:13.670 And this is one of many external CSS layout systems, but this is probably one of the most popular and 3 00:13.670 --> 00:17.030 the one that you'll most likely to come across out in the wild. 4 00:17.630 --> 00:26.030 Bootstrap, as I said, is a CSS framework created in 2010 by two Twitter developers Mark Otto and Jacob 5 00:26.030 --> 00:26.780 Thornton. 6 00:26.990 --> 00:34.100 Now the power of Bootstrap and the reason why it became so popular is it contained pre-made CSS files, 7 00:34.100 --> 00:40.820 which you can simply include into your project in order to use their pre-built components and styling. 8 00:40.820 --> 00:46.790 For example, if you wanted to have some tags in your website, you could create a look like this by 9 00:46.790 --> 00:49.400 simply adding a few classes to your HTML. 10 00:49.520 --> 00:56.150 On top of that, one of the biggest reasons why Bootstrap took off is because of their 12-column layout 11 00:56.150 --> 00:58.520 system built on top of Flexbox 12 00:58.520 --> 01:05.820 that makes it really easy to create responsive websites and websites that simply just work and look 13 01:05.820 --> 01:11.130 great on mobile as well as desktop, the so-called, Mobile First approach. 14 01:11.130 --> 01:13.320 So how exactly does it work? 15 01:13.320 --> 01:18.120 Well, let's say you had a button which just said "Home", 16 01:18.240 --> 01:23.580 you can see that the standard button rendered from HTML doesn't look fantastic. 17 01:23.820 --> 01:32.040 But if we included just five classes which come from the Bootstrap CSS, so we include the pre-built 18 01:32.040 --> 01:39.570 CSS into our project and we add the styling and the components by adding these classes to our HTML, 19 01:39.600 --> 01:47.340 then all of a sudden what you'll end up with is something that looks beautiful and pre-styled like this. 20 01:47.820 --> 01:53.880 And because we don't have to worry about writing all of the CSS code, all we need to know is which 21 01:53.880 --> 01:56.670 classes we need to add to our HTML, 22 01:56.700 --> 02:02.730 then it makes everything so much easier and so much quicker when we want to build components into our 23 02:02.730 --> 02:03.450 website. 24 02:03.600 --> 02:08.940 Now, as I mentioned, bootstrap is a type of CSS Framework, 25 02:09.030 --> 02:10.840 what exactly are these? 26 02:10.860 --> 02:17.150 Well, they're pre-made CSS files which you can include into your projects. 27 02:17.160 --> 02:23.910 If we had a look at the Bootstrap GitHub and because Bootstrap is completely open-source, then all 28 02:23.910 --> 02:30.750 of the code is visible. And you can see it's got styling defined for all of the different components, 29 02:30.750 --> 02:38.640 for example, this is inside the Card Component and it's got classes that define what a card body should 30 02:38.640 --> 02:44.880 look like, what kind of layout it should have, what kind of color it should have, as well as what 31 02:44.880 --> 02:48.000 the card title should look like, subtitle, 32 02:48.000 --> 02:54.780 and it's got all of this predefined CSS, which we can simply insert straight into our HTML. 33 02:55.230 --> 03:02.010 Now, the two most popular external CSS frameworks are Bootstrap and Foundation, but there are lots 34 03:02.010 --> 03:06.210 more like MUI and Tailwind and a whole bunch more. 35 03:06.210 --> 03:11.220 And the reason why they're so great is because they allow us to add in pre-built components and develop 36 03:11.220 --> 03:13.950 websites quickly and efficiently. 37 03:14.070 --> 03:21.480 If we look at the usage percentages across the Internet, you can see that the biggest CSS external 38 03:21.480 --> 03:26.340 framework is still Bootstrap with close to 80% of the market share. 39 03:26.640 --> 03:32.850 But just because we learn about Bootstrap, it doesn't mean that everything we learned about CSS is 40 03:32.880 --> 03:33.600 null and void. 41 03:33.600 --> 03:40.440 In fact, if you look at the top here, when we look at the absolute usage percentages of all of the 42 03:40.440 --> 03:46.200 different frameworks across the Internet, you can see the largest percentage are still websites that 43 03:46.200 --> 03:49.440 don't use any external CSS frameworks. 44 03:49.560 --> 03:53.160 What does it mean when there are no CSS frameworks being used? 45 03:53.160 --> 03:59.250 Well, it means you're probably using native CSS like Flexbox and Grid and Float and all of the great 46 03:59.250 --> 04:00.610 things that we learnt before. 47 04:00.630 --> 04:06.420 So Bootstrap doesn't replace any of that knowledge and in fact, we should be in a situation where we 48 04:06.420 --> 04:13.290 don't actually need to depend on any sort of external framework. But, they are really useful when we 49 04:13.290 --> 04:19.890 want to develop websites quickly and easily and we don't want to spend a ton of time designing our websites, 50 04:19.890 --> 04:25.470 because it comes with all of the pre-made styling and all of the styling rules that we can easily conform 51 04:25.470 --> 04:27.510 to by using their components. 52 04:27.630 --> 04:31.260 So what are the pros of external CSS frameworks? 53 04:31.260 --> 04:37.710 Well, they're easy and they're fast to use and you get a ton of pre-built components like this Pricing 54 04:37.710 --> 04:40.770 Plan, which took us ages to build ourselves. 55 04:40.770 --> 04:44.370 And you also get really consistent styling across your website. 56 04:44.370 --> 04:51.090 It's almost like you hired a professional developer who kept everything looking on-brand. And finally 57 04:51.090 --> 04:57.060 you have really good browser compatibility because they've tested all of the different browsers Safari, 58 04:57.060 --> 04:59.370 Chrome, Brave and whichever browsers that 59 04:59.390 --> 05:00.770 your user might be using. 60 05:00.770 --> 05:04.270 So you don't actually have to do all of this complicated testing. 61 05:04.280 --> 05:07.070 You can just trust that it works out of the box. 62 05:07.310 --> 05:10.510 Now, what are some of the downsides of CSS frameworks? 63 05:10.520 --> 05:13.850 Well, one of the biggest downsides is something called, Class Bloat. 64 05:14.240 --> 05:20.390 Remember previously we mentioned that it's a really good idea to separate structure from style, where 65 05:20.390 --> 05:23.570 we said that HTML is for structure, 66 05:23.660 --> 05:33.170 so adding in elements that describe what the purpose is, and CSS is for style. Using external CSS frameworks, 67 05:33.170 --> 05:39.380 because we're adding everything into the classes, then very quickly you end up with what's called class 68 05:39.380 --> 05:47.570 bloat, where you have a lot of styling going into the actual HTML file and it looks a lot less clean 69 05:47.570 --> 05:53.450 than if we had just used something like Grid or Flexbox, where we have all of our predefined classes and 70 05:53.450 --> 05:58.400 we go easy on the classes that we add in to our HTML file. 71 05:58.490 --> 06:01.910 The other downside is customization. 72 06:01.920 --> 06:09.060 If you want to build a website where you want to have full control over every pixel and layout and everything 73 06:09.060 --> 06:16.680 to be exactly the way you designed it, then external CSS frameworks is probably not the way to go because 74 06:16.680 --> 06:21.630 in order to customize each and every component, it can be really time consuming. 75 06:21.630 --> 06:26.340 So when should you use the CSS frameworks like Bootstrap and when should you not? 76 06:26.370 --> 06:35.520 Well, when you are building a mobile-first responsive website that you want to put online very quickly 77 06:35.520 --> 06:41.730 and access beautiful components designed by professional designers, keeping everything on your website 78 06:41.730 --> 06:47.640 looking slick and uniform, then you probably want to consider using Bootstrap. 79 06:47.670 --> 06:53.520 But if you're building a very simple website, where you just need HTML and CSS and you can quickly throw 80 06:53.520 --> 07:00.630 it up, or if you're building a really complex custom design website and you want complete control over 81 07:00.630 --> 07:07.500 the design, then it's probably not a good idea to use an external CSS framework like Bootstrap. 82 07:07.590 --> 07:13.290 So we've spoken so much about the pros and cons, when to use, when not to use, but how do you actually 83 07:13.290 --> 07:13.890 use it? 84 07:13.920 --> 07:18.460 Well, one of the easiest ways is to include it via a CDN link. 85 07:18.480 --> 07:23.220 We've seen how we can use the link tag in order to add our stylesheets, 86 07:23.220 --> 07:31.560 and in a similar way, we can use these link tags that simply gets hold of the stylesheet from an external 87 07:31.560 --> 07:32.370 resource. 88 07:32.370 --> 07:38.760 So in this case it's through CDN, which stands for Content Delivery Network. 89 07:39.600 --> 07:47.610 And what these are is little hubs all across the entire world and it knows where your users are located. 90 07:47.610 --> 07:54.000 So when they load up your website and try to access this particular CSS file that contains all of the 91 07:54.000 --> 08:00.690 Bootstrap code, then it can find the closest location with the shortest distance to the server that 92 08:00.690 --> 08:02.070 has that content. 93 08:02.070 --> 08:07.320 And that just means that even though this has to be downloaded from somewhere, it can be delivered 94 08:07.320 --> 08:10.740 to your user and rendered very, very quickly. 95 08:10.740 --> 08:17.550 And from our point of view as developers, all we need to do is simply include this link into the head 96 08:17.550 --> 08:19.740 section of our HTML. 97 08:19.740 --> 08:26.520 And if we want any of the functionality like dropdown menus or clickable buttons, then we want to include 98 08:26.520 --> 08:31.920 the Bootstrap script just before the end of the body section. 99 08:32.430 --> 08:34.740 So somewhere right about here. 100 08:34.770 --> 08:42.900 Now let's go ahead and try an exercise and see if we can upgrade our website quickly by using Bootstrap. 101 08:42.900 --> 08:51.060 Download 11.0 Bootstrap Intro, and if you open it inside of VS Code, open the index.html, you can see 102 08:51.060 --> 08:54.090 there are four TODO's for you to complete. 103 08:54.210 --> 09:01.740 And once you've completed all of these four steps, you should end up with a card that displays a sunflower 104 09:01.740 --> 09:02.340 image. 105 09:02.340 --> 09:06.300 And this is one of the pre-built Bootstrap components. 106 09:06.750 --> 09:08.970 Now how are you going to do this? 107 09:08.970 --> 09:15.390 Well, firstly, you're going to head over to getbootstrap.com, which is the main bootstrap website, 108 09:15.390 --> 09:21.030 and then I want you to include the bootstrap files using CDN. 109 09:21.060 --> 09:26.010 You only need the CSS file through this link element for now. 110 09:26.010 --> 09:32.160 And then I want you to go into the documentation if you want to look up anything regarding the Card 111 09:32.160 --> 09:38.970 Component, which is all the way down here in Components under the Card Section. 112 09:39.570 --> 09:41.940 Now you know what the goal should look like. 113 09:41.970 --> 09:47.250 You've got all of the resources to get started and you should be able to work through each of the TODOs 114 09:47.250 --> 09:48.690 one by one. 115 09:48.990 --> 09:52.260 Pause the video and see if you can complete this challenge. 116 09:57.790 --> 09:58.150 All right. 117 09:58.180 --> 10:05.230 Hopefully, you've given that a go and you've seen that the Bootstrap Card has some example code, which 118 10:05.230 --> 10:08.900 you can straight up just drop into your file. 119 10:08.920 --> 10:12.210 If you haven't given this a go, pause the video now, 120 10:12.220 --> 10:17.050 don't continue because things will get harder and harder as we go on in the course, 121 10:17.050 --> 10:23.050 and if you just watch the videos, eventually, at some point things are not going to make sense because 122 10:23.050 --> 10:24.610 you haven't had the practice. 123 10:24.790 --> 10:30.610 Make things easy for your future self by putting in lots of effort and practice now. 124 10:31.090 --> 10:32.500 All right, enough said. 125 10:32.530 --> 10:37.900 First thing, let's walk through the solution together and hopefully you can check it against your work. 126 10:37.990 --> 10:43.240 Now the first thing we're going to do is add the bootstrap link, which comes from the homepage, 127 10:43.240 --> 10:48.970 and we just want this first link that is going to include the stylesheet. 128 10:48.970 --> 10:53.260 And you can see this is a link with a relationship of stylesheet. 129 10:53.260 --> 10:58.100 So instead of using our own stylesheet, we're now using the bootstrap CSS. 130 10:58.400 --> 11:04.640 And if you're wondering what that "min" stands for, it's basically a file where all of the spaces are 131 11:04.640 --> 11:08.630 taken away so that it's as short as possible. 132 11:08.630 --> 11:14.000 So it loads up quicker because there's no spaces and everything's all jumbled, which is impossible 133 11:14.000 --> 11:15.080 for humans to read, 134 11:15.080 --> 11:19.020 but it works just fine for the computer. 135 11:19.040 --> 11:22.670 TODO Number 2 is to add the bootstrap pre-built card. 136 11:22.670 --> 11:29.690 So if we go into our docs and find our Card Component, you can see the first example is pretty much 137 11:29.690 --> 11:31.120 the card we want to build. 138 11:31.130 --> 11:37.790 If we look at the goal, we've got our Card title, some example text, a button and an image, and 139 11:37.790 --> 11:40.700 this is exactly the same as this example. 140 11:40.700 --> 11:46.950 So let's copy the HTML and paste it into here, under TODO Number 2. 141 11:46.970 --> 11:51.350 Now let's check our work, let's show it in preview and see what it looks like. 142 11:51.380 --> 11:52.430 It looks pretty good 143 11:52.460 --> 11:56.570 other than the fact that the image is pretty much completely broken. 144 11:56.570 --> 12:02.840 So step three is to change the image source to display the flower JPEG image. 145 12:02.990 --> 12:10.510 The image is right here and right now the source is completely empty because it's an example. 146 12:10.520 --> 12:15.230 Let's go ahead and change it to our image, which is flower.jpeg. 147 12:15.260 --> 12:21.590 You see it show up immediately and as always with images, let's add an alt text so that people with 148 12:21.590 --> 12:23.780 screen readers know what it's all about. 149 12:24.260 --> 12:24.740 All right. 150 12:24.770 --> 12:32.690 Now the final step is a little bit of a revision step because I wanted you to use Flexbox to center 151 12:32.690 --> 12:35.870 the card in the vertical and horizontal center. 152 12:35.870 --> 12:42.230 If we take a look at this URL on our browser, you can see it's stuck all the way to the top left, 153 12:42.230 --> 12:44.990 which is default HTML layout, 154 12:44.990 --> 12:50.600 but if we want it right here in the middle, then we're going to need to use some Flexbox magic and 155 12:50.600 --> 12:56.240 we're going to do that inside an internal style element right here under TODO Number 4. 156 12:56.450 --> 12:58.420 What do we need to target? 157 12:58.430 --> 13:01.310 Well, we need to target the entire card, 158 13:01.310 --> 13:04.790 and the topmost level is this "flex-container." 159 13:05.000 --> 13:13.310 The reason why it's of class, flex-container, is because this comes from the Bootstrap CSS and it's got 160 13:13.310 --> 13:17.270 some styling in there that defines that container, 161 13:17.270 --> 13:19.910 but we can always override it. 162 13:19.910 --> 13:25.580 And this is really, really important when we want to override a particular Bootstrap style, we have 163 13:25.580 --> 13:28.160 to make sure that it's more specific. 164 13:28.160 --> 13:36.740 So either it goes inside an internal style element or it goes inside an inline style property, or if 165 13:36.740 --> 13:44.420 we're using our standard external CSS and we use a link linking to, I don't know, say, 166 13:45.050 --> 13:51.890 ./css/style.css and we have style.css file somewhere in our project, then you've got to make sure 167 13:51.890 --> 13:58.130 that your custom CSS file occurs below the Bootstrap link. 168 13:58.130 --> 14:06.350 That way this is first looked at, and then the browser looks at your custom style sheet, and you can override 169 14:06.350 --> 14:09.410 any of the classes that come from B ootstrap. 170 14:10.070 --> 14:14.720 So this is an important point to remember for the future when you're creating your own custom style 171 14:14.720 --> 14:15.320 sheets. 172 14:15.650 --> 14:21.680 All right, so now in order to override the style here, now we might be building on top of existing 173 14:21.680 --> 14:26.270 Bootstrap styles or we might be specifying something they don't even care about, and it's not defined 174 14:26.270 --> 14:28.340 in the bootstrap CSS at all. 175 14:28.640 --> 14:35.450 In our case, we want to change this flex-container to "display: flex" because we know that this is one 176 14:35.450 --> 14:39.980 of the simplest ways to center anything in CSS. 177 14:40.340 --> 14:45.770 And the first thing we need to change is the justify-content set to center, 178 14:45.770 --> 14:49.790 and the second one is align-items set to center, 179 14:49.820 --> 14:56.660 and finally, we need to make sure that the entire container takes up the full height and not just some 180 14:56.660 --> 14:56.860 proportion 181 14:57.000 --> 14:57.830 of the height 182 14:57.840 --> 14:59.960 that's enough for the content. 183 14:59.970 --> 15:04.740 So let's set the height to 100vh, 184 15:04.740 --> 15:11.460 and now you can see our card is perfectly centered in the middle using Flexbox. 185 15:11.490 --> 15:18.330 It's a component that we've borrowed and customized from Bootstrap, and you can see how easy it was, 186 15:18.360 --> 15:23.460 and quick to create this layout by leveraging the power of Bootstrap. 187 15:23.640 --> 15:28.660 In the next lesson, we're going to dive deeper into Bootstrap, and we're going to look at how the Bootstrap 188 15:28.680 --> 15:32.040 12-column layout system actually works in practice. 189 15:32.040 --> 15:35.150 So for all of that and more, I'll see you in the next lesson.