1
00:00:00,980 --> 00:00:07,780
All right, it's time to talk about layout now, we already learned how layout works and bootstrap,

2
00:00:07,790 --> 00:00:10,750
and we talked about why Bootstrap became so popular.

3
00:00:11,420 --> 00:00:16,580
Now, don't worry, later on in the course, I'm going to introduce you to topics like in sixth grade

4
00:00:16,580 --> 00:00:22,000
and actually talk about really easy ways to do layout on a page.

5
00:00:22,730 --> 00:00:27,010
But for now, we want us to use bootstrap because that's what we learned.

6
00:00:27,140 --> 00:00:30,630
And I'm warning you, this is going to seem very overwhelming.

7
00:00:31,130 --> 00:00:37,070
I want to show you how Bootstrap does layout, because down the road, when I introduce you to things

8
00:00:37,070 --> 00:00:43,100
like CSFs Grid, you're going to see how much easier we have it now than we had maybe a few years ago.

9
00:00:43,520 --> 00:00:49,670
But I still want you to learn how layout is done and bootstrap because you will encounter it throughout

10
00:00:49,670 --> 00:00:50,220
your career.

11
00:00:50,780 --> 00:00:55,610
Now, if you go to the layout section on the bootstrap documentation, you see over here that it has

12
00:00:55,610 --> 00:00:57,490
some pretty good information.

13
00:00:57,530 --> 00:01:03,740
We can look at the grids and we've already talked about how Grid works with bootstrap.

14
00:01:05,700 --> 00:01:11,400
Now, the first thing we want to do is to have a container and then maybe some rows that we can use

15
00:01:11,400 --> 00:01:12,810
columns on.

16
00:01:14,880 --> 00:01:21,540
So if we go back to our page and we open up the index file, the first thing I want to do around the

17
00:01:21,540 --> 00:01:27,060
body and one thing I'll do with my sublime text here is actually minimize the attack here just so we

18
00:01:27,060 --> 00:01:27,890
can see a little bit.

19
00:01:27,930 --> 00:01:30,180
So I'm going to just click on this and look at that.

20
00:01:30,180 --> 00:01:32,330
It's minimized so I can just focus on the body.

21
00:01:33,090 --> 00:01:39,540
The first thing I want to do is say that I want to create a debate with a class of container.

22
00:01:41,870 --> 00:01:44,390
Just like that, and then we'll close this.

23
00:01:46,650 --> 00:01:51,810
Right over here, so let's indent that properly, let's save and refresh.

24
00:01:53,030 --> 00:01:58,970
All right, we have everything in a container next is that we want to ideally all of these things to

25
00:01:58,970 --> 00:01:59,630
be in a row.

26
00:01:59,630 --> 00:02:07,100
So we want the wand, the H.R. and the bun to just be a row one row that we have that is in the center

27
00:02:07,100 --> 00:02:07,670
of the page.

28
00:02:08,330 --> 00:02:15,710
So I'm just going to wrap this in a div and give it a class of row.

29
00:02:16,850 --> 00:02:19,310
So once again, let's close the deve.

30
00:02:22,680 --> 00:02:25,560
And intend this again, if I refresh.

31
00:02:26,870 --> 00:02:27,930
Not much has changed.

32
00:02:27,950 --> 00:02:34,220
We may have lost the hour, we'll get back to that in a second, but we have a row now so that if I

33
00:02:34,220 --> 00:02:35,780
inspect, let's say, view.

34
00:02:37,210 --> 00:02:38,140
Developer tools.

35
00:02:41,250 --> 00:02:49,140
And I click on this inspect, I see well, these elements, if I go over here and let's open this up,

36
00:02:49,320 --> 00:02:54,720
make this a little bit smaller, we see that we have the body, we have the div, which is the container,

37
00:02:55,080 --> 00:02:56,940
and then we have the row right here.

38
00:02:58,820 --> 00:03:00,110
All right, let me close this.

39
00:03:01,520 --> 00:03:04,910
Let's divide up these items into different sections.

40
00:03:05,810 --> 00:03:14,860
We have the header element that we can use and this header element will contain the H1 over here.

41
00:03:15,500 --> 00:03:17,080
So we have the header.

42
00:03:17,600 --> 00:03:22,340
And one thing that we can use with bootstrap is a class called.

43
00:03:23,760 --> 00:03:31,880
Text center and text center, as you might guess, if I refresh centers, the text, so that's great,

44
00:03:31,890 --> 00:03:33,510
that's our header element.

45
00:03:34,110 --> 00:03:37,610
And we also want to create another section here.

46
00:03:37,650 --> 00:03:39,000
Let's call it section.

47
00:03:40,420 --> 00:03:44,920
So this is a section element and this section element.

48
00:03:46,220 --> 00:03:48,140
We'll also have the class.

49
00:03:49,780 --> 00:03:51,430
Text center.

50
00:03:52,000 --> 00:03:53,020
So if I refresh.

51
00:03:54,560 --> 00:03:55,150
There you go.

52
00:03:55,190 --> 00:04:02,390
We got our horizontal line back and hmmm, why isn't this centered?

53
00:04:03,590 --> 00:04:05,150
Let's inspect this and find out.

54
00:04:06,090 --> 00:04:12,840
So I can open developer tools by pressing command option I or control option I, if you're on a windows.

55
00:04:15,670 --> 00:04:18,160
And let's look at the elements, we have the container.

56
00:04:19,230 --> 00:04:20,220
We have the RO.

57
00:04:21,280 --> 00:04:25,930
We have the header and then we have the section, hmm?

58
00:04:26,200 --> 00:04:32,830
Now we see over here that these swans aren't taking up the full width, as we would want of the container.

59
00:04:33,280 --> 00:04:35,320
And we've seen this before with bootstrap.

60
00:04:35,320 --> 00:04:35,680
Right.

61
00:04:36,790 --> 00:04:44,920
We have to use this column's to tell it, hey, we want to contain or expand along the call.

62
00:04:47,830 --> 00:04:54,820
And because Bootstrap uses a 12 grid system, we can just say in here in the header, we want the column

63
00:04:55,090 --> 00:04:59,650
12 grid and then for the section we want the column 12.

64
00:05:00,820 --> 00:05:01,100
Great.

65
00:05:02,080 --> 00:05:03,070
So if I refresh.

66
00:05:04,340 --> 00:05:10,460
There you go, look at that, if I go over here, I see that we have the row, we have the header and

67
00:05:10,460 --> 00:05:14,300
then we have the text, which, as you can see, contains.

68
00:05:15,470 --> 00:05:18,290
The full amount of the container in the blue.

69
00:05:20,140 --> 00:05:21,340
That's looking a lot better.

70
00:05:21,520 --> 00:05:22,050
That's great.

71
00:05:23,210 --> 00:05:30,470
Now, if I close this home, are taxed and button, it's still at the top, ideally it's in the middle

72
00:05:30,470 --> 00:05:32,480
of the image, how can we fix this?

73
00:05:34,200 --> 00:05:41,670
Now, this part is really, really tricky if I actually search vertical alignment here.

74
00:05:43,060 --> 00:05:50,650
You'll see that Bouchareb has some vertical alignment options, but these ones are using inline light

75
00:05:50,650 --> 00:05:55,120
block in line table, which is actually not the recommended way.

76
00:05:56,540 --> 00:06:03,950
Now, the way we're going to do this is we're going to use Fleck's and this is a new feature with Bouchra

77
00:06:03,950 --> 00:06:09,910
because they're using the flex box utilities that we've learned about.

78
00:06:10,280 --> 00:06:10,570
Right.

79
00:06:11,030 --> 00:06:20,690
So if I go over here, you can see that I can activate the flex box system by using the D flex class.

80
00:06:21,230 --> 00:06:27,770
So if I copy this and go to the container and say deflects if I refresh.

81
00:06:28,660 --> 00:06:32,800
All right, nothing happened because we've just enabled box.

82
00:06:34,740 --> 00:06:41,040
But now we want to make sure that we can place things vertically in the center.

83
00:06:43,380 --> 00:06:50,880
And this, if we scroll down, is what we want right here, a line items, if we look over here, it's

84
00:06:50,880 --> 00:06:53,130
a line items center.

85
00:06:54,430 --> 00:07:04,150
So if I copy this, which is this one over here, and we add a line items center, if I refresh.

86
00:07:06,160 --> 00:07:13,360
Hmmm, this isn't working and this is a little tricky and I'm showing you this just to understand how

87
00:07:13,360 --> 00:07:14,410
to debug things.

88
00:07:14,740 --> 00:07:16,990
So let's say you just did this and for some reason.

89
00:07:17,410 --> 00:07:21,780
Hmm, you don't understand why this isn't working on the documentation page.

90
00:07:21,790 --> 00:07:25,720
Clearly, it shows us that this should be working.

91
00:07:26,810 --> 00:07:30,440
Well, we can inspect, so let's right click inspect.

92
00:07:31,280 --> 00:07:33,690
And have a look at our e-mail page.

93
00:07:34,340 --> 00:07:40,580
We have the container and then the body, now you see here how everything is in the container.

94
00:07:41,300 --> 00:07:46,700
And as a matter of fact, if we look at the container, we're actually aligning items in the center

95
00:07:47,060 --> 00:07:50,290
because the container is actually not the full page.

96
00:07:50,780 --> 00:07:52,370
It's only the top part.

97
00:07:52,430 --> 00:07:52,840
Right.

98
00:07:53,330 --> 00:07:54,290
It's just this port.

99
00:07:55,040 --> 00:07:59,390
So here the container is not fully.

100
00:08:00,410 --> 00:08:01,400
Covering the page.

101
00:08:02,780 --> 00:08:07,880
So what we need to do, just like we have in body, if we look at style here.

102
00:08:08,980 --> 00:08:11,350
You see how we have a height of 100 percent.

103
00:08:12,490 --> 00:08:18,700
All we need to do is tell the container that, hey, I want to disband the entire height of the page

104
00:08:19,330 --> 00:08:25,390
and in Bootstrap we can do that by saying height 100 instead of adding the next stop.

105
00:08:27,190 --> 00:08:29,440
If I save this and refresh.

106
00:08:30,440 --> 00:08:39,260
Look at that fly, hover, you'll see that my container is now the full length of the page and our writing

107
00:08:39,260 --> 00:08:44,360
is right in the middle, if I scroll up or down, look at that.

108
00:08:44,390 --> 00:08:45,650
It's adjusting properly.

109
00:08:45,800 --> 00:08:47,450
Everything is centered.

110
00:08:50,100 --> 00:08:56,160
Now, don't worry, if this takes you a long time to figure out, sometimes it involves Googling around,

111
00:08:56,160 --> 00:09:02,790
figure things out like it said later on in the layout section of the course, I'll actually show you

112
00:09:02,790 --> 00:09:04,570
how to make this so much simpler.

113
00:09:05,040 --> 00:09:08,880
Now, the last thing I want to do is, well, right here.

114
00:09:09,330 --> 00:09:12,740
I want to have a bit of space between the writing and the button.

115
00:09:13,500 --> 00:09:14,820
So what can we do here?

116
00:09:15,830 --> 00:09:23,480
I want another section in between these two to hopefully buffer them away from each other so we can

117
00:09:23,480 --> 00:09:31,940
create that fairly easily, we can just add a new div and we'll give it a class year of buffer that

118
00:09:31,940 --> 00:09:34,370
we'll have to write ourselves in.

119
00:09:34,370 --> 00:09:41,730
This buffer class will be in between the header and then the horizontal line and the bottom.

120
00:09:42,170 --> 00:09:49,350
So let's also give this a column of 12, because we want to make sure that it covers the entire area.

121
00:09:49,730 --> 00:09:52,640
But right now, there's nothing if I.

122
00:09:52,670 --> 00:09:52,970
Right.

123
00:09:52,970 --> 00:09:55,040
Click here and inspect.

124
00:09:59,250 --> 00:10:04,380
You'll see here that I have the buffer, but the buffer doesn't have anything, it's completely empty

125
00:10:04,380 --> 00:10:06,300
because, well, there's nothing inside here.

126
00:10:07,050 --> 00:10:17,380
But we can add a style, let's say that buffer in this buffer will have a height of what shall we say?

127
00:10:17,850 --> 00:10:21,810
Well, if I do, let's say 50 pixels and I refresh.

128
00:10:23,000 --> 00:10:29,090
Look at that, I get a nice little buffer, so now if I scroll over to Buffer, you see that I have

129
00:10:29,090 --> 00:10:35,240
a 50 pixel height buffer, but I always like using RTM instead of pixels.

130
00:10:35,250 --> 00:10:36,710
So let's do RTM.

131
00:10:37,010 --> 00:10:39,860
Let's see what five RTM means.

132
00:10:39,890 --> 00:10:40,190
All right.

133
00:10:40,190 --> 00:10:40,750
That's good.

134
00:10:41,030 --> 00:10:41,660
Maybe.

135
00:10:43,130 --> 00:10:45,320
A little bit more, let's do 10 RTM.

136
00:10:46,280 --> 00:10:48,260
Let's save and refresh.

137
00:10:48,620 --> 00:10:52,100
All right, that looks actually quite nice if I close this tab.

138
00:10:53,140 --> 00:11:00,190
Open it up, yeah, look at that now, looks really, really nice, and there we go, we have our startup

139
00:11:00,190 --> 00:11:01,230
landing page right here.

140
00:11:01,960 --> 00:11:03,840
Everything looks pretty nice, right?

141
00:11:04,150 --> 00:11:07,480
And the way we've organized things seems pretty clean.

142
00:11:07,940 --> 00:11:11,020
Our bun is well when we hover.

143
00:11:12,150 --> 00:11:21,930
Available, but whenever I click on this button, nothing's happening, ideally, we have a new page

144
00:11:21,930 --> 00:11:26,640
that opens up so that we can enter or our customers can enter their e-mails.

145
00:11:27,030 --> 00:11:30,360
And this is the exciting part that we're going to get to in the next video.

146
00:11:31,050 --> 00:11:32,670
I'll see that one by.