WEBVTT 0 00:00.890 --> 00:05.230 Now, the next Bootstrap element I want to talk about are containers. 1 00:05.450 --> 00:11.330 So, if you head over to Documentation and go to Layout, in the Overview section you can see that the 2 00:11.330 --> 00:18.110 first thing that they talk about are containers. And containers are a basic building block for a lot 3 00:18.110 --> 00:23.130 of the components in Bootstrap. It’s actually required when you use a lot of Bootstrap components. 4 00:23.300 --> 00:29.840 For example, when you use the grid system, as we saw previously, you can see that all of these grids were 5 00:29.870 --> 00:33.360 in fact contained inside a container. 6 00:33.650 --> 00:42.500 And this is really really useful, because it allows you to horizontally center, or to pad out your content, 7 00:42.510 --> 00:45.320 by simply using this container. 8 00:45.470 --> 00:51.410 So let's take a look at containers in more detail. So, I’ve created a new Code Ply that I'm just going 9 00:51.410 --> 00:59.060 to call Bootstrap 4 Container, and I'm going to change again the Bootstrap framework to 4.0, 10 00:59.270 --> 01:08.460 hit save, and now I'm going to create a new div that's going to have a class of container. And inside the 11 01:08.460 --> 01:12.420 div, of course, I need a little bit of content for it to be visible. 12 01:12.420 --> 01:19.170 So, in this case, I'm just going to copy the ’Lorem ipsum’ that I've got from this web site, so that I can use it 13 01:19.170 --> 01:21.140 to pad out my div. 14 01:21.210 --> 01:30.150 So, the last thing I want to do is add a little bit of background color to, maybe, red again, hit run, and 15 01:30.150 --> 01:34.560 we've got this container that contains all the text that's inside. 16 01:34.560 --> 01:36.660 Now of course you can contain anything you want, 17 01:36.660 --> 01:41.610 for example divs, or buttons, or tables, anything you need. 18 01:41.610 --> 01:48.930 But this component, what it does is, if I pop this out as a window, you can see that we've got our container 19 01:48.990 --> 01:54.000 that's colored in red. Now, it's automatically responsive. 20 01:54.000 --> 02:02.010 So what that means is that, as I go through, so going from desktop to laptop to tablet to mobile sized, 21 02:02.370 --> 02:09.210 you can see that the maximum width of the container jumps through different values, and you can see these 22 02:09.210 --> 02:13.490 values if you just simply inspect on the container. 23 02:13.630 --> 02:15.400 Let's select the container, 24 02:15.410 --> 02:18.360 and let’s watch this max-width value. 25 02:18.360 --> 02:21.170 So at the moment we're on the largest size, 26 02:21.180 --> 02:24.030 so this is the sort of laptop size. 27 02:24.130 --> 02:26.700 And as the width goes down, 28 02:26.700 --> 02:33.660 so let's make that first jump to the smaller desktop size, you can see that our max-width is now 960. 29 02:33.690 --> 02:35.080 Let's go to the tablet size. 30 02:35.100 --> 02:42.750 You can see it made another jump to 720 max-width. And finally to the mobile size, which is now max-width 31 02:42.840 --> 02:44.680 540 pixels. 32 02:44.700 --> 02:51.450 So this allows anything that's contained inside your container to be fully responsive relative to the 33 02:51.450 --> 02:53.250 size of the viewport. 34 02:53.250 --> 02:58.830 Now, for some people this might seem a little bit jarring, as it jumps around a bit. 35 02:58.830 --> 03:05.700 So, the other type of containers that you have is what's called a fluid container. And fluid containers 36 03:05.720 --> 03:08.180 take up 100 percent of the width. 37 03:08.250 --> 03:15.630 So let's copy this container and paste another one below, and change this one to a container-fluid, 38 03:16.050 --> 03:21.500 change the color to yellow, and let's run that. 39 03:21.510 --> 03:25.530 So let's pop this out as a full screen. 40 03:25.530 --> 03:30.170 You can see the difference now, as I go through the different break points. 41 03:30.180 --> 03:37.260 So, as we go from the large desk top to the smaller desktops, you can see that the normal container is 42 03:37.260 --> 03:43.980 jumping through the different widths, but the fluid container is simply adapting to the width of the 43 03:43.980 --> 03:49.190 screen, and always taking up 100 percent of the screen width. 44 03:49.230 --> 03:58.030 So, I want to use a container inside our web site to be able to add padding and centering to our content. 45 03:58.260 --> 04:01.490 But I don't want that jumpiness from the normal container, 46 04:01.500 --> 04:04.430 so instead I want to use a fluid container. 47 04:04.740 --> 04:11.730 So, let's head into our index.html, and I want to include the navigation bar along with the title 48 04:11.730 --> 04:14.480 and the images in the same container. 49 04:14.700 --> 04:24.270 So, let's add a div just around here, and let's give that class a container-fluid, and we're going 50 04:24.270 --> 04:29.250 to put the closing div just before the closing tag. 51 04:29.250 --> 04:36.890 And now if we go ahead and beautify our code, then you can see that that div now wraps around our nav 52 04:36.890 --> 04:39.450 bar as well as the title section. 53 04:39.450 --> 04:45.340 So now we can go ahead and select that div and style it in our CSS. 54 04:45.480 --> 04:49.970 So, the class that we're going to select is the container-fluid. 55 04:50.220 --> 04:56.910 And even though Bootstrap already has some pre added styles to this, we are going to make it a little 56 04:56.910 --> 05:03.090 bit more personalized to our purposes, namely we’re going to add some padding, and we're going to add 57 05:03.090 --> 05:04.550 it to all four sides. 58 05:04.710 --> 05:12.640 So we're going to add 3 percent padding to the top and bottom and 15 percent to the left and the right. 59 05:12.720 --> 05:21.360 And now, if we hit save, we can check out what it looks like with that container. If I switch on Pesticide, 60 05:21.390 --> 05:26.760 you can see that we've got this large box that goes all the way around, including the navigation bar, 61 05:27.030 --> 05:29.910 as well as all the stuff in the title section. 62 05:29.910 --> 05:36.490 So now we can group everything together and start working on our components inside the container. 63 05:36.900 --> 05:43.130 So, in the next lesson we're going to learn about another Bootstrap component to style up our title page 64 05:43.160 --> 05:43.970 further, 65 05:44.220 --> 05:49.860 and that is going to be the Bootstrap buttons. And we're going to use it to style up our download buttons 66 05:49.860 --> 05:51.140 to make it look nice. 67 05:51.150 --> 05:54.380 So, for all of that and more, I'll see you on the next lesson.