1 00:00:00,300 --> 00:00:01,133 Instructor: Hey guys. 2 00:00:01,133 --> 00:00:02,820 In this section we're gonna be learning 3 00:00:02,820 --> 00:00:05,070 about the Bootstrap framework. 4 00:00:05,070 --> 00:00:10,070 And this is one of many external CSS layout systems 5 00:00:11,490 --> 00:00:13,620 but this is probably one of the most popular 6 00:00:13,620 --> 00:00:15,930 and the one that you'll most likely to come across 7 00:00:15,930 --> 00:00:16,983 out in the wild. 8 00:00:17,850 --> 00:00:21,180 Bootstrap, as I said is a CSSS framework 9 00:00:21,180 --> 00:00:24,540 created in 2010 by two Twitter developers, 10 00:00:24,540 --> 00:00:27,270 Mark Otto and Jacob Thornton. 11 00:00:27,270 --> 00:00:29,610 Now, the power of Bootstrap and the reason why 12 00:00:29,610 --> 00:00:34,019 it became so popular is it contained pre-made CSSS files 13 00:00:34,019 --> 00:00:36,748 which you can simply include into your project 14 00:00:36,748 --> 00:00:41,070 in order to use their prebuilt components and styling. 15 00:00:41,070 --> 00:00:43,470 For example, if you wanted to have some tags 16 00:00:43,470 --> 00:00:46,680 in your website, you could create a look like this 17 00:00:46,680 --> 00:00:49,860 by simply adding a few classes to your HTML. 18 00:00:49,860 --> 00:00:51,930 On top of that, one of the biggest reasons 19 00:00:51,930 --> 00:00:55,830 why Bootstrap took off is because of their 12 column 20 00:00:55,830 --> 00:00:58,740 layout system built on top of Flexbox 21 00:00:58,740 --> 00:01:01,864 that makes it really easy to create responsive websites 22 00:01:01,864 --> 00:01:04,950 and websites that simply just work 23 00:01:04,950 --> 00:01:08,730 and look great on mobile as well as desktop. 24 00:01:08,730 --> 00:01:11,250 The so-called mobile first approach. 25 00:01:11,250 --> 00:01:13,350 So how exactly does it work? 26 00:01:13,350 --> 00:01:18,350 Well, let's say you had a button which just said home. 27 00:01:18,450 --> 00:01:21,450 You can see that the standard button rendered from HTML 28 00:01:21,450 --> 00:01:23,723 doesn't look fantastic 29 00:01:23,723 --> 00:01:27,330 but if we included just five classes, 30 00:01:27,330 --> 00:01:30,180 which come from the Bootstrap CSS... 31 00:01:30,180 --> 00:01:33,801 So we include the prebuilt CSS into our project 32 00:01:33,801 --> 00:01:36,450 and we add the styling and the components 33 00:01:36,450 --> 00:01:39,750 by adding these classes to our HTML, 34 00:01:39,750 --> 00:01:42,101 then all of a sudden what you'll end up with 35 00:01:42,101 --> 00:01:47,101 is something that looks beautiful and pre-styled like this. 36 00:01:48,060 --> 00:01:49,710 And because we don't have to worry 37 00:01:49,710 --> 00:01:51,892 about writing all of this CSS code 38 00:01:51,892 --> 00:01:55,380 all we need to know is which classes we need to add 39 00:01:55,380 --> 00:01:59,190 to our HTML, then it makes everything so much easier 40 00:01:59,190 --> 00:02:02,250 and so much quicker when we want to build components 41 00:02:02,250 --> 00:02:03,840 into our website. 42 00:02:03,840 --> 00:02:04,950 Now, as I mentioned 43 00:02:04,950 --> 00:02:09,210 Bootstrap is a type of CSS framework. 44 00:02:09,210 --> 00:02:10,979 What exactly are these? 45 00:02:10,979 --> 00:02:13,586 Well, they're pre-made CSS files 46 00:02:13,586 --> 00:02:16,981 which you can include into your projects. 47 00:02:16,981 --> 00:02:19,911 If we had a look at the Bootstrap GitHub 48 00:02:19,911 --> 00:02:23,280 and because Bootstrap is completely open source 49 00:02:23,280 --> 00:02:25,939 then all of the code is visible 50 00:02:25,939 --> 00:02:28,020 and you can see it's got styling defined 51 00:02:28,020 --> 00:02:30,900 for all of the different components. 52 00:02:30,900 --> 00:02:34,540 For example, this is inside the card component 53 00:02:34,540 --> 00:02:37,110 and it's got classes that define 54 00:02:37,110 --> 00:02:39,298 what a card body should look like, 55 00:02:39,298 --> 00:02:41,850 what kind of layout it should have, 56 00:02:41,850 --> 00:02:43,890 what kind of color it should have 57 00:02:43,890 --> 00:02:46,980 as well as what the card title should look like, 58 00:02:46,980 --> 00:02:50,760 subtitle and it's got all of this predefined CSS 59 00:02:50,760 --> 00:02:55,470 which we can simply insert straight into our HTML. 60 00:02:55,470 --> 00:02:58,500 Now, the two most popular external CSS frameworks 61 00:02:58,500 --> 00:03:02,310 are Bootstrap and Foundation, but there are lots more 62 00:03:02,310 --> 00:03:06,390 like MUI and Tailwind and a whole bunch more. 63 00:03:06,390 --> 00:03:08,250 And the reason why they're so great is because 64 00:03:08,250 --> 00:03:10,680 they allow us to add in pre-built components 65 00:03:10,680 --> 00:03:14,220 and develop websites quickly and efficiently. 66 00:03:14,220 --> 00:03:17,880 If we look at the usage percentages across the internet 67 00:03:17,880 --> 00:03:22,170 you can see that the biggest CSS external framework 68 00:03:22,170 --> 00:03:26,820 is still Bootstrap with close to 80% of the market share. 69 00:03:26,820 --> 00:03:29,400 But just because we learn about Bootstrap, 70 00:03:29,400 --> 00:03:31,140 it doesn't mean that everything 71 00:03:31,140 --> 00:03:33,660 we learned about CSS is null and void. 72 00:03:33,660 --> 00:03:36,360 In fact, if you look at the top here 73 00:03:36,360 --> 00:03:38,962 when we look at the absolute usage percentages 74 00:03:38,962 --> 00:03:42,780 of all of the different frameworks across the internet, 75 00:03:42,780 --> 00:03:45,990 you can see the largest percentage are still websites 76 00:03:45,990 --> 00:03:49,346 that don't use any external CSS frameworks. 77 00:03:49,346 --> 00:03:50,490 What does it mean 78 00:03:50,490 --> 00:03:53,160 when there are no CSS frameworks being used? 79 00:03:53,160 --> 00:03:55,740 Well, it means you're probably using native CSS 80 00:03:55,740 --> 00:03:58,230 like Flexbox and Grid and Float 81 00:03:58,230 --> 00:04:00,780 and all of the great things that we learnt before. 82 00:04:00,780 --> 00:04:03,217 So Bootstrap doesn't replace any of that knowledge 83 00:04:03,217 --> 00:04:06,120 and in fact, we should be in a situation 84 00:04:06,120 --> 00:04:08,160 where we don't actually need to depend 85 00:04:08,160 --> 00:04:10,451 on any sort of external framework, 86 00:04:10,451 --> 00:04:12,682 but they are really useful 87 00:04:12,682 --> 00:04:15,030 when we wanna develop websites quickly 88 00:04:15,030 --> 00:04:18,180 and easily and we don't wanna spend a ton of time 89 00:04:18,180 --> 00:04:20,100 designing our websites 90 00:04:20,100 --> 00:04:22,415 because it comes with all of the pre-made styling 91 00:04:22,415 --> 00:04:25,830 and all of the styling rules that we can easily conform to 92 00:04:25,830 --> 00:04:27,870 by using their components. 93 00:04:27,870 --> 00:04:31,260 So what are the pros of external CSS frameworks? 94 00:04:31,260 --> 00:04:34,200 Well, they're easy and they're fast to use, 95 00:04:34,200 --> 00:04:36,540 and you get a ton of pre-built components 96 00:04:36,540 --> 00:04:37,980 like this pricing plan 97 00:04:37,980 --> 00:04:40,572 which took us ages to build ourselves. 98 00:04:40,572 --> 00:04:43,320 And you also get really consistent styling 99 00:04:43,320 --> 00:04:44,400 across your website. 100 00:04:44,400 --> 00:04:47,310 It's almost like you hired a professional developer 101 00:04:47,310 --> 00:04:50,280 who kept everything looking on brand. 102 00:04:50,280 --> 00:04:53,430 And finally you have really good browser compatibility 103 00:04:53,430 --> 00:04:56,280 because they've tested all of the different browsers, 104 00:04:56,280 --> 00:04:58,320 Safari, Chrome, Brave, 105 00:04:58,320 --> 00:05:00,900 and whichever browsers that your user might be using 106 00:05:00,900 --> 00:05:02,430 so you don't actually have to do 107 00:05:02,430 --> 00:05:04,440 all of this complicated testing, 108 00:05:04,440 --> 00:05:07,620 you can just trust that it works out of the box. 109 00:05:07,620 --> 00:05:10,710 Now, what are some of the downsides of CSS frameworks? 110 00:05:10,710 --> 00:05:12,450 Well, one of the biggest downsides 111 00:05:12,450 --> 00:05:14,400 is something called class bloat. 112 00:05:14,400 --> 00:05:16,080 Remember previously we've mentioned 113 00:05:16,080 --> 00:05:19,050 that it's a really good idea to separate structure 114 00:05:19,050 --> 00:05:23,940 from style where we said that HTML is for structure. 115 00:05:23,940 --> 00:05:28,440 So adding in elements that describe what the purpose is 116 00:05:28,440 --> 00:05:31,140 and CSS is for style. 117 00:05:31,140 --> 00:05:33,270 Using external CSS frameworks 118 00:05:33,270 --> 00:05:36,259 because we're adding everything into the classes, 119 00:05:36,259 --> 00:05:40,020 then very quickly you end up with what's called class bloat 120 00:05:40,020 --> 00:05:42,120 where you have a lot of styling 121 00:05:42,120 --> 00:05:44,926 going into the actual HTML file 122 00:05:44,926 --> 00:05:47,640 and it looks a lot less clean 123 00:05:47,640 --> 00:05:50,700 than if we had just used something like Grid or Flexbox 124 00:05:50,700 --> 00:05:53,190 where we have all of our predefined classes 125 00:05:53,190 --> 00:05:55,680 and we go easy on the classes 126 00:05:55,680 --> 00:05:58,770 that we add into our HTML file. 127 00:05:58,770 --> 00:06:01,784 The other downside is customization. 128 00:06:01,784 --> 00:06:05,010 If you want to build a website where you wanna have 129 00:06:05,010 --> 00:06:08,340 full control over every pixel and layout 130 00:06:08,340 --> 00:06:11,940 and everything to be exactly the way you designed it 131 00:06:11,940 --> 00:06:16,290 then external CSS frameworks is probably not the way to go 132 00:06:16,290 --> 00:06:19,560 because in order to customize each and every component 133 00:06:19,560 --> 00:06:21,780 it can be really time consuming. 134 00:06:21,780 --> 00:06:24,150 So when should you use these CSS frameworks 135 00:06:24,150 --> 00:06:26,550 like Bootstrap and when should you not? 136 00:06:26,550 --> 00:06:28,860 Well, when you are building 137 00:06:28,860 --> 00:06:32,610 a mobile first responsive website 138 00:06:32,610 --> 00:06:35,550 that you want to put online very quickly 139 00:06:35,550 --> 00:06:37,650 and access beautiful components 140 00:06:37,650 --> 00:06:40,110 designed by professional designers 141 00:06:40,110 --> 00:06:44,700 keeping everything on your website looking slick and uniform 142 00:06:44,700 --> 00:06:47,910 then you probably want to consider using Bootstrap. 143 00:06:47,910 --> 00:06:50,850 But if you're building a very simple website 144 00:06:50,850 --> 00:06:53,845 where you just need HTML CSS and you can quickly throw it up 145 00:06:53,845 --> 00:06:58,530 or if you're building a really complex custom design website 146 00:06:58,530 --> 00:07:01,380 and you want complete control over the design 147 00:07:01,380 --> 00:07:03,300 then it's probably not a good idea 148 00:07:03,300 --> 00:07:07,830 to use an external CSS framework like Bootstrap. 149 00:07:07,830 --> 00:07:10,500 So we've spoken so much about the pros and cons, 150 00:07:10,500 --> 00:07:14,040 when to use when not to use, but how do you actually use it? 151 00:07:14,040 --> 00:07:15,510 Well, one of the easiest ways 152 00:07:15,510 --> 00:07:18,600 is to include it via a CDN link. 153 00:07:18,600 --> 00:07:21,030 We've seen how we can use the link tag 154 00:07:21,030 --> 00:07:25,110 in order to add our style sheets, and in a similar way, 155 00:07:25,110 --> 00:07:28,710 we can use these link tags that simply gets hold 156 00:07:28,710 --> 00:07:32,490 of the style sheet from an external resource. 157 00:07:32,490 --> 00:07:34,860 So in this case it's through a CDN 158 00:07:34,860 --> 00:07:38,643 which stands for Content Delivery Network. 159 00:07:39,840 --> 00:07:42,060 And what these are is little hubs 160 00:07:42,060 --> 00:07:44,130 all across the entire world 161 00:07:44,130 --> 00:07:47,730 and it knows where your users are located 162 00:07:47,730 --> 00:07:49,650 so when they load up your website 163 00:07:49,650 --> 00:07:52,800 and try to access this particular CSS file 164 00:07:52,800 --> 00:07:55,200 that contains all of the Bootstrap code, 165 00:07:55,200 --> 00:07:58,110 then it can find the closest location 166 00:07:58,110 --> 00:07:59,700 with the shortest distance 167 00:07:59,700 --> 00:08:02,280 to the server that has that content. 168 00:08:02,280 --> 00:08:04,050 And that just means that even though 169 00:08:04,050 --> 00:08:06,510 this has to be downloaded from somewhere 170 00:08:06,510 --> 00:08:08,032 it can be delivered to your user 171 00:08:08,032 --> 00:08:11,010 and rendered very, very quickly. 172 00:08:11,010 --> 00:08:13,170 And from our point of view as developers 173 00:08:13,170 --> 00:08:15,942 all we need to do is simply include this link 174 00:08:15,942 --> 00:08:19,579 into the head section of our HTML 175 00:08:19,579 --> 00:08:22,260 and if we want any of the functionality 176 00:08:22,260 --> 00:08:25,530 like dropdown menus or clickable buttons 177 00:08:25,530 --> 00:08:28,110 then we wanna include the Bootstrap script 178 00:08:28,110 --> 00:08:32,610 just before the end of the body section. 179 00:08:32,610 --> 00:08:34,950 So somewhere right about here. 180 00:08:34,950 --> 00:08:37,740 Now let's go ahead and try and exercise 181 00:08:37,740 --> 00:08:41,370 and see if we can upgrade our website quickly 182 00:08:41,370 --> 00:08:43,020 by using Bootstrap. 183 00:08:43,020 --> 00:08:46,080 Download 11.0 Bootstrap Intro. 184 00:08:46,080 --> 00:08:50,490 And if you open it inside of VS Code, open the index.html, 185 00:08:50,490 --> 00:08:54,480 you can see there are four to-dos for you to complete. 186 00:08:54,480 --> 00:08:57,420 And once you've completed all of these four steps 187 00:08:57,420 --> 00:08:59,760 you should end up with a card 188 00:08:59,760 --> 00:09:02,490 that displays a sunflower image 189 00:09:02,490 --> 00:09:06,685 and this is one of the pre-built Bootstrap components. 190 00:09:06,685 --> 00:09:09,030 Now how are you gonna do this? 191 00:09:09,030 --> 00:09:12,810 Well, firstly, you can head over to getbootstrap.com 192 00:09:12,810 --> 00:09:15,201 which is the main Bootstrap website. 193 00:09:15,201 --> 00:09:18,360 And then I want you to include 194 00:09:18,360 --> 00:09:21,210 the Bootstrap files using CDN. 195 00:09:21,210 --> 00:09:23,310 You only need the CSS file 196 00:09:23,310 --> 00:09:26,250 through this link element for now. 197 00:09:26,250 --> 00:09:28,800 And then I want you to go into the documentation 198 00:09:28,800 --> 00:09:32,787 if you want to look up anything regarding the card component 199 00:09:32,787 --> 00:09:35,460 which is all the way down here 200 00:09:35,460 --> 00:09:38,793 in components under the card section. 201 00:09:39,810 --> 00:09:41,940 Now you know what the goal should look like. 202 00:09:41,940 --> 00:09:44,880 You've got all of the resources to get started 203 00:09:44,880 --> 00:09:46,590 and you should be able to work through 204 00:09:46,590 --> 00:09:48,672 each of the to-do's one by one. 205 00:09:48,672 --> 00:09:52,143 Pause the video and see if you can complete this challenge. 206 00:09:57,900 --> 00:09:59,970 All right, hopefully you've given that a go 207 00:09:59,970 --> 00:10:02,916 and you've seen that the Bootstrap card 208 00:10:02,916 --> 00:10:05,070 has some example code 209 00:10:05,070 --> 00:10:08,682 which you can straight up just drop into your file. 210 00:10:08,682 --> 00:10:10,478 If you haven't given this a go, 211 00:10:10,478 --> 00:10:13,590 pause the video now don't continue, 212 00:10:13,590 --> 00:10:15,210 because things will get harder 213 00:10:15,210 --> 00:10:17,310 and harder as we go on in the course. 214 00:10:17,310 --> 00:10:19,245 And if you just watch the videos, 215 00:10:19,245 --> 00:10:22,680 eventually at some point things are not gonna make sense 216 00:10:22,680 --> 00:10:25,050 because you haven't had the practice. 217 00:10:25,050 --> 00:10:27,240 Make things easy for your future self 218 00:10:27,240 --> 00:10:31,290 by putting in lots of effort and practice now. 219 00:10:31,290 --> 00:10:32,424 All right, enough said. 220 00:10:32,424 --> 00:10:35,760 First thing, let's walk through the solution together 221 00:10:35,760 --> 00:10:38,310 and hopefully you can check it against your work. 222 00:10:38,310 --> 00:10:39,450 Now the first thing we're gonna do 223 00:10:39,450 --> 00:10:43,500 is add the Bootstrap link, which comes from the homepage 224 00:10:43,500 --> 00:10:45,717 and we just want this first link 225 00:10:45,717 --> 00:10:49,200 that is going to include the style sheet. 226 00:10:49,200 --> 00:10:51,180 And you can see this is a link 227 00:10:51,180 --> 00:10:53,370 with a relationship or style sheet. 228 00:10:53,370 --> 00:10:55,560 So instead of using our own style sheet 229 00:10:55,560 --> 00:10:58,620 we're now using the Bootstrap CSS. 230 00:10:58,620 --> 00:11:01,020 And if you're wondering what that MIN stands for 231 00:11:01,020 --> 00:11:05,790 it's basically a file where all of the spaces are taken away 232 00:11:05,790 --> 00:11:10,050 so that it's as short as possible so it loads up quicker 233 00:11:10,050 --> 00:11:13,020 because there's no spaces and everything's all jumbled 234 00:11:13,020 --> 00:11:15,270 which is impossible for humans to read 235 00:11:15,270 --> 00:11:18,480 but it works just fine for the computer. 236 00:11:18,480 --> 00:11:22,800 To do number two is to add the Bootstrap prebuilt card. 237 00:11:22,800 --> 00:11:27,270 So if we go into our docs and find our card component 238 00:11:27,270 --> 00:11:29,640 you can see the first example is pretty much 239 00:11:29,640 --> 00:11:31,350 the card we wanna build. 240 00:11:31,350 --> 00:11:34,350 If we look at the goal, we've got our card title, 241 00:11:34,350 --> 00:11:37,620 some example text, a button, and an image. 242 00:11:37,620 --> 00:11:40,650 And this is exactly the same as this example. 243 00:11:40,650 --> 00:11:45,030 So let's copy the HTML and paste it into here 244 00:11:45,030 --> 00:11:47,190 under to do number two. 245 00:11:47,190 --> 00:11:48,690 Now let's check our work. 246 00:11:48,690 --> 00:11:51,480 Let's show it in preview and see what it looks like. 247 00:11:51,480 --> 00:11:53,160 It looks pretty good other than the fact 248 00:11:53,160 --> 00:11:56,670 that the image is pretty much completely broken. 249 00:11:56,670 --> 00:11:59,495 So step three is to change the image source 250 00:11:59,495 --> 00:12:02,773 to display the flower JPEG image. 251 00:12:02,773 --> 00:12:05,230 The image is right here 252 00:12:06,120 --> 00:12:08,850 and right now the source is completely empty 253 00:12:08,850 --> 00:12:10,650 'cause it's an example. 254 00:12:10,650 --> 00:12:13,260 Let's go ahead and change it to our image, 255 00:12:13,260 --> 00:12:15,300 which is flower.jpeg. 256 00:12:15,300 --> 00:12:18,810 You see it show up immediately, and as always with images 257 00:12:18,810 --> 00:12:22,320 let's add a alt text so that people with screen readers 258 00:12:22,320 --> 00:12:24,029 know what it's all about. 259 00:12:24,029 --> 00:12:27,270 All right, now the final step is a little bit 260 00:12:27,270 --> 00:12:31,980 of a revision step because I wanted you to use Flexbox 261 00:12:31,980 --> 00:12:35,940 to center the card in the vertical and horizontal center. 262 00:12:35,940 --> 00:12:39,510 If we take a look at this URL on our browser 263 00:12:39,510 --> 00:12:42,240 you can see it's stuck all the way to the top left 264 00:12:42,240 --> 00:12:45,180 which is default HTML layout. 265 00:12:45,180 --> 00:12:47,370 But if we want it right here in the middle 266 00:12:47,370 --> 00:12:50,550 then we're gonna need to use some Flexbox magic 267 00:12:50,550 --> 00:12:51,390 and we're gonna do that 268 00:12:51,390 --> 00:12:54,600 inside an internal style element right here 269 00:12:54,600 --> 00:12:56,670 under to do number four. 270 00:12:56,670 --> 00:12:58,410 What do we need to target? 271 00:12:58,410 --> 00:13:01,380 Well, we need to target the entire card 272 00:13:01,380 --> 00:13:05,190 and the topmost level is this Flex Container. 273 00:13:05,190 --> 00:13:08,430 The reason why it's of class Flex Container 274 00:13:08,430 --> 00:13:12,750 is because this comes from the Bootstrap CSS 275 00:13:12,750 --> 00:13:15,180 and it's got some styling in there 276 00:13:15,180 --> 00:13:20,010 that defines that container but we can always override it. 277 00:13:20,010 --> 00:13:22,140 And this is really, really important. 278 00:13:22,140 --> 00:13:25,140 When we want to override a particular Bootstrap style 279 00:13:25,140 --> 00:13:28,380 we have to make sure that it's more specific. 280 00:13:28,380 --> 00:13:32,116 So either it goes inside an internal style element 281 00:13:32,116 --> 00:13:35,706 or it goes inside an inline style property. 282 00:13:35,706 --> 00:13:39,440 Or if we're using our standard external CSS 283 00:13:39,440 --> 00:13:43,738 and we use a link linking to, I dunno, say 284 00:13:43,738 --> 00:13:48,738 /CSS/style.CSS and we have a style.CSS file 285 00:13:49,410 --> 00:13:50,492 somewhere in our project 286 00:13:50,492 --> 00:13:54,480 then you gotta make sure that your custom CSS file 287 00:13:54,480 --> 00:13:58,410 occurs below the Bootstrap link 288 00:13:58,410 --> 00:14:01,500 that way this is first looked at 289 00:14:01,500 --> 00:14:05,010 and then the browser looks at your custom style sheet 290 00:14:05,010 --> 00:14:07,560 and you can override any of the classes 291 00:14:07,560 --> 00:14:09,910 that come from Bootstrap. 292 00:14:09,910 --> 00:14:12,668 So this is an important point to remember for the future 293 00:14:12,668 --> 00:14:15,720 when you are creating your own custom style sheets. 294 00:14:15,720 --> 00:14:19,680 All right, so now in order to override the style here 295 00:14:19,680 --> 00:14:22,470 now we might be building on top of existing Bootstrap styles 296 00:14:22,470 --> 00:14:24,270 or we might be specifying something 297 00:14:24,270 --> 00:14:25,320 they don't even care about 298 00:14:25,320 --> 00:14:28,407 and it's not defined in the Bootstrap CSS at all. 299 00:14:28,407 --> 00:14:31,590 In our case, we wanna change this Flex container 300 00:14:31,590 --> 00:14:34,770 to display Flex because we know 301 00:14:34,770 --> 00:14:36,362 that this is one of the simplest ways 302 00:14:36,362 --> 00:14:40,560 to center anything in CSS. 303 00:14:40,560 --> 00:14:41,970 And the first thing we need to change 304 00:14:41,970 --> 00:14:46,050 is the justify content set to center. 305 00:14:46,050 --> 00:14:50,190 And the second one is align items set to center. 306 00:14:50,190 --> 00:14:52,230 And finally, we need to make sure 307 00:14:52,230 --> 00:14:55,229 that the entire container takes up the full height 308 00:14:55,229 --> 00:14:57,930 and not just some proportion of the height 309 00:14:57,930 --> 00:15:00,300 that's enough for the content. 310 00:15:00,300 --> 00:15:05,100 So let's set the height to 100 viewport height. 311 00:15:05,100 --> 00:15:09,660 And now you can see our card is perfectly centered 312 00:15:09,660 --> 00:15:11,760 in the middle using Flexbox. 313 00:15:11,760 --> 00:15:14,725 It's a component that we've borrowed and customized 314 00:15:14,725 --> 00:15:18,480 from Bootstrap, and you can see how easy it was 315 00:15:18,480 --> 00:15:20,963 and quick to create this layout 316 00:15:20,963 --> 00:15:23,850 by leveraging the power of Bootstrap. 317 00:15:23,850 --> 00:15:26,676 In the next lesson, we're gonna dive deeper into Bootstrap 318 00:15:26,676 --> 00:15:27,870 and we're gonna look at 319 00:15:27,870 --> 00:15:30,210 how the Bootstrap 12 column layout system 320 00:15:30,210 --> 00:15:32,310 actually works in practice. 321 00:15:32,310 --> 00:15:35,310 So for all of that and more I'll see you in the next lesson.