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.