Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,890 --> 00:00:05,230
Now, the next Bootstrap element I want to talk about are containers.
2
00:00:05,450 --> 00:00:11,330
So, if you head over to Documentation and go to Layout, in the Overview section you can see that the
3
00:00:11,330 --> 00:00:18,110
first thing that they talk about are containers. And containers are a basic building block for a lot
4
00:00:18,110 --> 00:00:23,130
of the components in Bootstrap. It’s actually required when you use a lot of Bootstrap components.
5
00:00:23,300 --> 00:00:29,840
For example, when you use the grid system, as we saw previously, you can see that all of these grids were
6
00:00:29,870 --> 00:00:33,360
in fact contained inside a container.
7
00:00:33,650 --> 00:00:42,500
And this is really really useful, because it allows you to horizontally center, or to pad out your content,
8
00:00:42,510 --> 00:00:45,320
by simply using this container.
9
00:00:45,470 --> 00: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
10
00:00:51,410 --> 00:00:59,060
to call Bootstrap 4 Container, and I'm going to change again the Bootstrap framework to 4.0,
11
00:00:59,270 --> 00: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
12
00:01:08,460 --> 00:01:12,420
div, of course, I need a little bit of content for it to be visible.
13
00:01:12,420 --> 00: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
14
00:01:19,170 --> 00:01:21,140
to pad out my div.
15
00:01:21,210 --> 00: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
16
00:01:30,150 --> 00:01:34,560
we've got this container that contains all the text that's inside.
17
00:01:34,560 --> 00:01:36,660
Now of course you can contain anything you want,
18
00:01:36,660 --> 00:01:41,610
for example divs, or buttons, or tables, anything you need.
19
00:01:41,610 --> 00: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
20
00:01:48,990 --> 00:01:54,000
that's colored in red. Now, it's automatically responsive.
21
00:01:54,000 --> 00:02:02,010
So what that means is that, as I go through, so going from desktop to laptop to tablet to mobile sized,
22
00:02:02,370 --> 00:02:09,210
you can see that the maximum width of the container jumps through different values, and you can see these
23
00:02:09,210 --> 00:02:13,490
values if you just simply inspect on the container.
24
00:02:13,630 --> 00:02:15,400
Let's select the container,
25
00:02:15,410 --> 00:02:18,360
and let’s watch this max-width value.
26
00:02:18,360 --> 00:02:21,170
So at the moment we're on the largest size,
27
00:02:21,180 --> 00:02:24,030
so this is the sort of laptop size.
28
00:02:24,130 --> 00:02:26,700
And as the width goes down,
29
00:02:26,700 --> 00: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.
30
00:02:33,690 --> 00:02:35,080
Let's go to the tablet size.
31
00:02:35,100 --> 00: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
32
00:02:42,840 --> 00:02:44,680
540 pixels.
33
00:02:44,700 --> 00:02:51,450
So this allows anything that's contained inside your container to be fully responsive relative to the
34
00:02:51,450 --> 00:02:53,250
size of the viewport.
35
00:02:53,250 --> 00:02:58,830
Now, for some people this might seem a little bit jarring, as it jumps around a bit.
36
00:02:58,830 --> 00:03:05,700
So, the other type of containers that you have is what's called a fluid container. And fluid containers
37
00:03:05,720 --> 00:03:08,180
take up 100 percent of the width.
38
00:03:08,250 --> 00:03:15,630
So let's copy this container and paste another one below, and change this one to a container-fluid,
39
00:03:16,050 --> 00:03:21,500
change the color to yellow, and let's run that.
40
00:03:21,510 --> 00:03:25,530
So let's pop this out as a full screen.
41
00:03:25,530 --> 00:03:30,170
You can see the difference now, as I go through the different break points.
42
00:03:30,180 --> 00:03:37,260
So, as we go from the large desk top to the smaller desktops, you can see that the normal container is
43
00:03:37,260 --> 00:03:43,980
jumping through the different widths, but the fluid container is simply adapting to the width of the
44
00:03:43,980 --> 00:03:49,190
screen, and always taking up 100 percent of the screen width.
45
00:03:49,230 --> 00: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.
46
00:03:58,260 --> 00:04:01,490
But I don't want that jumpiness from the normal container,
47
00:04:01,500 --> 00:04:04,430
so instead I want to use a fluid container.
48
00:04:04,740 --> 00:04:11,730
So, let's head into our index.html, and I want to include the navigation bar along with the title
49
00:04:11,730 --> 00:04:14,480
and the images in the same container.
50
00:04:14,700 --> 00: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
51
00:04:24,270 --> 00:04:29,250
to put the closing div just before the closing tag.
52
00:04:29,250 --> 00: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
53
00:04:36,890 --> 00:04:39,450
bar as well as the title section.
54
00:04:39,450 --> 00:04:45,340
So now we can go ahead and select that div and style it in our CSS.
55
00:04:45,480 --> 00:04:49,970
So, the class that we're going to select is the container-fluid.
56
00:04:50,220 --> 00:04:56,910
And even though Bootstrap already has some pre added styles to this, we are going to make it a little
57
00:04:56,910 --> 00:05:03,090
bit more personalized to our purposes, namely we’re going to add some padding, and we're going to add
58
00:05:03,090 --> 00:05:04,550
it to all four sides.
59
00:05:04,710 --> 00: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.
60
00:05:12,720 --> 00: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,
61
00:05:21,390 --> 00:05:26,760
you can see that we've got this large box that goes all the way around, including the navigation bar,
62
00:05:27,030 --> 00:05:29,910
as well as all the stuff in the title section.
63
00:05:29,910 --> 00:05:36,490
So now we can group everything together and start working on our components inside the container.
64
00:05:36,900 --> 00:05:43,130
So, in the next lesson we're going to learn about another Bootstrap component to style up our title page
65
00:05:43,160 --> 00:05:43,970
further,
66
00:05:44,220 --> 00: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
67
00:05:49,860 --> 00:05:51,140
to make it look nice.
68
00:05:51,150 --> 00:05:54,380
So, for all of that and more, I'll see you on the next lesson.
7242
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.