0
1
00:00:00,890 --> 00:00:05,230
Now, the next Bootstrap element I want to talk about are containers.
1

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
2

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
3

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.
4

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
5

6
00:00:29,870 --> 00:00:33,360
in fact contained inside a container.
6

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,
7

8
00:00:42,510 --> 00:00:45,320
by simply using this container.
8

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
9

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,
10

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
11

12
00:01:08,460 --> 00:01:12,420
div, of course, I need a little bit of content for it to be visible.
12

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
13

14
00:01:19,170 --> 00:01:21,140
to pad out my div.
14

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
15

16
00:01:30,150 --> 00:01:34,560
we've got this container that contains all the text that's inside.
16

17
00:01:34,560 --> 00:01:36,660
Now of course you can contain anything you want,
17

18
00:01:36,660 --> 00:01:41,610
for example divs, or buttons, or tables, anything you need.
18

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
19

20
00:01:48,990 --> 00:01:54,000
that's colored in red. Now, it's automatically responsive.
20

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,
21

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
22

23
00:02:09,210 --> 00:02:13,490
values if you just simply inspect on the container.
23

24
00:02:13,630 --> 00:02:15,400
Let's select the container,
24

25
00:02:15,410 --> 00:02:18,360
and let’s watch this max-width value.
25

26
00:02:18,360 --> 00:02:21,170
So at the moment we're on the largest size,
26

27
00:02:21,180 --> 00:02:24,030
so this is the sort of laptop size.
27

28
00:02:24,130 --> 00:02:26,700
And as the width goes down,
28

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.
29

30
00:02:33,690 --> 00:02:35,080
Let's go to the tablet size.
30

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
31

32
00:02:42,840 --> 00:02:44,680
540 pixels.
32

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
33

34
00:02:51,450 --> 00:02:53,250
size of the viewport.
34

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.
35

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
36

37
00:03:05,720 --> 00:03:08,180
take up 100 percent of the width.
37

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,
38

39
00:03:16,050 --> 00:03:21,500
change the color to yellow, and let's run that.
39

40
00:03:21,510 --> 00:03:25,530
So let's pop this out as a full screen.
40

41
00:03:25,530 --> 00:03:30,170
You can see the difference now, as I go through the different break points.
41

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
42

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
43

44
00:03:43,980 --> 00:03:49,190
screen, and always taking up 100 percent of the screen width.
44

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.
45

46
00:03:58,260 --> 00:04:01,490
But I don't want that jumpiness from the normal container,
46

47
00:04:01,500 --> 00:04:04,430
so instead I want to use a fluid container.
47

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
48

49
00:04:11,730 --> 00:04:14,480
and the images in the same container.
49

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
50

51
00:04:24,270 --> 00:04:29,250
to put the closing div just before the closing tag.
51

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
52

53
00:04:36,890 --> 00:04:39,450
bar as well as the title section.
53

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.
54

55
00:04:45,480 --> 00:04:49,970
So, the class that we're going to select is the container-fluid.
55

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
56

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
57

58
00:05:03,090 --> 00:05:04,550
it to all four sides.
58

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.
59

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,
60

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,
61

62
00:05:27,030 --> 00:05:29,910
as well as all the stuff in the title section.
62

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.
63

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
64

65
00:05:43,160 --> 00:05:43,970
further,
65

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
66

67
00:05:49,860 --> 00:05:51,140
to make it look nice.
67

68
00:05:51,150 --> 00:05:54,380
So, for all of that and more, I'll see you on the next lesson.