1
00:00:04,040 --> 00:00:06,880
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,950 --> 00:00:12,230
In this lecture we're going to be continuing with our checkout page and building the billing information

3
00:00:12,230 --> 00:00:12,860
section.

4
00:00:12,860 --> 00:00:15,210
So let's go ahead and open each to your mail.

5
00:00:15,210 --> 00:00:17,900
We can hide the output and let's scroll down.

6
00:00:17,900 --> 00:00:19,350
I'm going to zoom in a little.

7
00:00:19,460 --> 00:00:24,920
I would scroll down to where we have our checkout page and we have the first portion of our checkout

8
00:00:24,920 --> 00:00:32,060
page which contains the pricing and the coupon options and then just outside of that we're gonna go

9
00:00:32,060 --> 00:00:41,830
ahead and make another one here and now make sure this one is outside of the div for the column but

10
00:00:42,100 --> 00:00:49,470
that it's still inside the div for the euro and for the actual checkout itself.

11
00:00:49,490 --> 00:00:56,200
So just before the two closing divs let's go ahead and build that next portion.

12
00:00:56,210 --> 00:01:01,910
This is going to allow the user to enter their name their billing information their shipping address

13
00:01:01,910 --> 00:01:02,970
etc..

14
00:01:02,990 --> 00:01:08,240
So to do this we're going to open up a new div and we're going to give it the class of column putting

15
00:01:08,240 --> 00:01:13,550
it as a column in the row and its size is going to be eight out of 12.

16
00:01:13,820 --> 00:01:20,480
And we can also set its order to 1 which means it's going to be before that other div which had the

17
00:01:20,480 --> 00:01:30,120
order to next let's open up a header and let's give it a billing address as the header.

18
00:01:30,140 --> 00:01:38,390
So first let's open up a class and set this to be the big three which will set the spacing and let's

19
00:01:38,390 --> 00:01:44,600
close off that header and inside of the header we're going to put in billing address prompting the user

20
00:01:44,600 --> 00:01:46,730
to enter their billing address.

21
00:01:46,730 --> 00:01:49,130
Next we're going to open up a form.

22
00:01:49,430 --> 00:01:57,230
And if we want the form to be functional we would have to add in JavaScript code but for now we can

23
00:01:57,350 --> 00:02:02,660
leave it to be the front end a portion of the form and I challenge you to fill in the back of the former

24
00:02:02,930 --> 00:02:03,990
leader.

25
00:02:04,010 --> 00:02:12,230
So here is our form in this form we're going to have a row with columns a column first for the first

26
00:02:12,230 --> 00:02:14,170
name and the last name.

27
00:02:14,300 --> 00:02:18,000
So let's go ahead and add in a column.

28
00:02:18,000 --> 00:02:27,920
Well first we'll put in a row so we can make a row inside of the form and this row is going to be a

29
00:02:27,920 --> 00:02:32,960
div and we'll close off the div with the element name.

30
00:02:33,130 --> 00:02:39,340
And in here we're going to open up a column for the first column in the row.

31
00:02:39,350 --> 00:02:47,540
So we're going to make this half of the with the width is 12 units so we're gonna set the with the column

32
00:02:47,540 --> 00:02:53,630
to six units and we're going to space it out by a value of three.

33
00:02:53,630 --> 00:02:58,220
Let's go ahead and close that div immediately with the closing div tag.

34
00:02:58,220 --> 00:02:58,940
Just like that.

35
00:02:58,940 --> 00:03:03,530
And now here we're going to put in an input which will allow the user to put in their name.

36
00:03:03,530 --> 00:03:04,960
So versus put in the input.

37
00:03:04,970 --> 00:03:11,150
So we're going to make an input type of text and the class will be form control.

38
00:03:11,230 --> 00:03:21,110
You can have the idea set already to first name as well as said it's required or not required.

39
00:03:21,140 --> 00:03:28,310
So if you put required that means that the user is required to put in this input and if they don't put

40
00:03:28,310 --> 00:03:37,550
it in they will be able to submit the form so we can put it as required and we can also add the label

41
00:03:37,580 --> 00:03:38,150
for this.

42
00:03:38,180 --> 00:03:46,160
So we're gonna put in a label for first name and we're going to close off that label.

43
00:03:46,160 --> 00:03:52,130
The label is for first name which refers to the idea of the input and that will ensure that the label

44
00:03:52,130 --> 00:03:54,340
goes directly above the input.

45
00:03:54,890 --> 00:04:01,430
So let's go ahead and put the text for the label which is going to be your first name and we can also

46
00:04:01,430 --> 00:04:07,580
add a div that will inform the user that it's required.

47
00:04:07,580 --> 00:04:08,980
We can do that later.

48
00:04:09,170 --> 00:04:12,080
For now let's go ahead and make the second column.

49
00:04:12,080 --> 00:04:17,670
So just outside of this column go ahead and make another column with the exact same format call and

50
00:04:17,700 --> 00:04:23,960
D6 which mean this with is six units out of 12 so it'll take a half the screen and it's spacing to be

51
00:04:23,960 --> 00:04:25,400
three.

52
00:04:25,510 --> 00:04:31,800
Let's go ahead and close off the div and you can try different spacing if you wish.

53
00:04:31,910 --> 00:04:37,910
These two are six because there are only two columns in this row which means each column should take

54
00:04:38,060 --> 00:04:40,470
up 50 percent because they're only two.

55
00:04:40,820 --> 00:04:41,090
Okay.

56
00:04:41,090 --> 00:04:44,520
So anyway we're going to follow a very similar format to the first name.

57
00:04:44,600 --> 00:04:51,530
We're gonna make an input of type text and its class is going to be form control because this is the

58
00:04:51,530 --> 00:04:56,930
form and its idea this time is going to be last name because 90 can only be for one element and we can

59
00:04:56,930 --> 00:04:58,700
make this required as well.

60
00:04:58,700 --> 00:05:05,840
And now below the input we're going to put in a label this label is going to be for the I.D..

61
00:05:05,860 --> 00:05:07,410
Last name.

62
00:05:07,570 --> 00:05:11,920
You notice that I did not call a hashtag here and from the I.D. name.

63
00:05:11,920 --> 00:05:13,900
That's because this is not an anchor.

64
00:05:13,900 --> 00:05:15,530
This is not a link reference.

65
00:05:15,570 --> 00:05:19,620
It is just saying what the label is for which input field.

66
00:05:19,670 --> 00:05:20,260
Okay great.

67
00:05:20,290 --> 00:05:25,360
So we actually have to close off the label with the closing label tag because unlike input it's not

68
00:05:25,420 --> 00:05:26,580
sort of closing.

69
00:05:26,780 --> 00:05:32,300
And here we put the text last name because this will prompt the user to enter their last name.

70
00:05:32,860 --> 00:05:35,220
Let's go ahead and test how this looks so far.

71
00:05:35,410 --> 00:05:42,940
So I'm going to go over to the output and scroll down and as you can see now we have these elements

72
00:05:42,940 --> 00:05:50,810
for the billing address and you'll notice the order is that it is in front of the card information.

73
00:05:50,860 --> 00:05:56,020
So we're going to fill in more elements of the billing address and then below that we're going to have

74
00:05:56,260 --> 00:05:57,880
the payment information.

75
00:05:58,330 --> 00:05:58,600
OK.

76
00:05:58,600 --> 00:06:00,210
So you notice the text is gray.

77
00:06:00,210 --> 00:06:05,160
Let's go ahead and fix that by going over to the HMO and we can use a bootstrap class to fix this and

78
00:06:05,160 --> 00:06:07,450
sort of CFS.

79
00:06:07,450 --> 00:06:12,510
So to do that we're gonna go up to where we need you row disappear.

80
00:06:12,520 --> 00:06:15,810
I'm gonna change the text to white using text white.

81
00:06:15,840 --> 00:06:23,200
If the bootstrap class and this will apply a white color to all the text in the row unless it is overwritten

82
00:06:23,200 --> 00:06:27,000
later such as text muted so text muted here it will not change.

83
00:06:27,010 --> 00:06:27,260
OK.

84
00:06:27,290 --> 00:06:32,860
So now we have the first name and the last name set up we're gonna add more fields down here.

85
00:06:32,890 --> 00:06:33,450
Okay.

86
00:06:33,940 --> 00:06:41,030
So we are going to add another div here for the email and e-mails are typically longer so we're gonna

87
00:06:41,050 --> 00:06:42,090
have a new row.

88
00:06:42,100 --> 00:06:53,410
So outside of this row we are going to add in the email and this should also be inside of the form still

89
00:06:53,410 --> 00:06:55,460
because it's all part of the same form.

90
00:06:55,570 --> 00:07:02,080
So let's open up a new div and we're gonna space it out immediately by giving it and b 3 and let's go

91
00:07:02,080 --> 00:07:04,330
ahead and close that div as well.

92
00:07:04,360 --> 00:07:09,550
And now we're gonna open it input and this time the type is going to be email and the class is still

93
00:07:09,550 --> 00:07:15,970
going to be fine control we want to keep all them in the same class a form control and the idea in this

94
00:07:15,970 --> 00:07:22,320
case will be email and we can go ahead and close that without using it quotes and tag because it's an

95
00:07:22,330 --> 00:07:29,530
input and let's open up a label and as it's for the I.D. email and let's go ahead and close off that

96
00:07:29,680 --> 00:07:30,290
label.

97
00:07:30,880 --> 00:07:33,740
And the text of the label will be email.

98
00:07:33,820 --> 00:07:34,110
Okay.

99
00:07:34,150 --> 00:07:34,450
Great.

100
00:07:34,450 --> 00:07:37,200
Now we have another div for the email.

101
00:07:37,330 --> 00:07:41,010
Let's go ahead and make another one for the address.

102
00:07:41,050 --> 00:07:45,520
So we're collecting user information and depending on your product you might not need all this information

103
00:07:45,910 --> 00:07:50,220
so you can customize this depending on the client you get.

104
00:07:50,230 --> 00:07:50,470
Okay.

105
00:07:50,500 --> 00:07:55,400
So we have another div that we need to make and we're going to space it out again.

106
00:07:55,450 --> 00:07:56,500
You can change if you like.

107
00:07:57,460 --> 00:07:57,970
Okay great.

108
00:07:57,970 --> 00:07:59,310
So we have a spacing.

109
00:07:59,500 --> 00:08:06,790
Let's go ahead and make the address field so I'm going to go ahead and make an input of type text for

110
00:08:06,790 --> 00:08:11,450
the address and the class will be the same form control.

111
00:08:11,680 --> 00:08:19,080
The idea is going to be address and we can make this required as well.

112
00:08:19,270 --> 00:08:25,110
I'd rather make the email required because we are selling a digital product this time.

113
00:08:25,390 --> 00:08:32,860
So it's up to you can leave the email as required usually to make it all required if we wanted to make

114
00:08:32,860 --> 00:08:33,400
this required.

115
00:08:34,490 --> 00:08:34,890
OK.

116
00:08:34,930 --> 00:08:35,830
Let's close that.

117
00:08:35,830 --> 00:08:43,390
Importantly the address is now required and we're gonna also add a label for this time the address I.D.

118
00:08:43,830 --> 00:08:48,310
And let's go ahead and close off that label and the label will say address.

119
00:08:48,820 --> 00:08:49,100
OK.

120
00:08:49,120 --> 00:08:49,420
Great.

121
00:08:49,420 --> 00:08:51,910
So now we have an address.

122
00:08:52,090 --> 00:08:56,020
Let's go ahead and also allow them to enter a country.

123
00:08:56,020 --> 00:09:05,100
So we're gonna enter a new row for this and this will allow them to choose a country from a selection.

124
00:09:05,110 --> 00:09:10,300
So let's go ahead and do that now to implement that you would have to use javascript but let's go ahead

125
00:09:10,300 --> 00:09:12,130
and set up the front end for it.

126
00:09:12,130 --> 00:09:17,890
This is all still in the form we're gonna open up a new row whenever you want to have elements side

127
00:09:17,890 --> 00:09:18,520
by side.

128
00:09:18,520 --> 00:09:21,280
You open up a row and put each on it into a column.

129
00:09:21,280 --> 00:09:26,560
If you just want the element to be on its own then you don't open up a row you just make the element.

130
00:09:26,780 --> 00:09:27,020
Okay.

131
00:09:27,040 --> 00:09:28,510
So we have our row here.

132
00:09:28,750 --> 00:09:36,010
Let's go ahead and make a class div class equals call and D5 so the size will be five and you can space

133
00:09:36,010 --> 00:09:37,510
it out as well.

134
00:09:37,510 --> 00:09:37,880
Okay.

135
00:09:38,030 --> 00:09:44,140
And let's close off that div and in here we're going to put in our country and allow the user to choose

136
00:09:44,140 --> 00:09:51,730
a country and then to also check if their shipping address is the same as their billing.

137
00:09:52,390 --> 00:09:56,210
And to save that information for next time if they want to do that as well.

138
00:09:56,980 --> 00:09:57,280
Okay.

139
00:09:57,310 --> 00:10:05,320
So let's go ahead and do this functionality in the lecture because this is going to be quite a bit complex

140
00:10:05,330 --> 00:10:11,960
we're going to make a selection for the country and a selection for the state.

141
00:10:11,990 --> 00:10:15,380
So we're going to fill that in in the next lecture.

142
00:10:15,410 --> 00:10:17,030
Other than that thank you all for watching.

143
00:10:17,030 --> 00:10:23,240
You now have set up the code for the first name and the last name the e-mail and the address.

144
00:10:23,780 --> 00:10:27,030
So let's go ahead and test how this looks before we continue.

145
00:10:27,050 --> 00:10:35,420
So I'm going to go to the output and scroll down and as you can see now the text is white here and you'll

146
00:10:35,420 --> 00:10:40,430
see we have a bit of too much margin here on the left and right when we're on mobile so we're going

147
00:10:40,430 --> 00:10:46,100
to have to go ahead and fix that won't be too hard to do you just change the margin of the bootstrap

148
00:10:46,100 --> 00:10:46,460
class.

149
00:10:46,460 --> 00:10:48,140
I encourage you to do that on your own.

150
00:10:48,200 --> 00:10:51,190
And I also zoomed in a little too much.

151
00:10:51,190 --> 00:10:54,980
So this is how I would look like zoomed out to 100 percent.

152
00:10:55,040 --> 00:10:59,780
So it looks much better on mobile when you're out of 100 percent zoom.

153
00:10:59,780 --> 00:11:03,500
So make sure when testing that you're at a hundred percent zoom because that will give you the most

154
00:11:03,920 --> 00:11:05,330
close to accuracy.

155
00:11:05,330 --> 00:11:10,340
Now when you're testing you will not get the exact same result that you'll get when you're actually

156
00:11:10,340 --> 00:11:12,260
running a website on a server.

157
00:11:12,260 --> 00:11:17,040
So that is important to know but you will get a close enough representation.

158
00:11:17,110 --> 00:11:17,410
OK.

159
00:11:17,420 --> 00:11:19,040
Thank you all for watching.

160
00:11:19,070 --> 00:11:23,140
In the next lecture we're gonna be adding more information to the billing address.

161
00:11:23,150 --> 00:11:27,300
We're going to allow the user to select their state to fill in their address.

162
00:11:27,390 --> 00:11:27,920
Other than that.

163
00:11:27,920 --> 00:11:28,580
Thank you for watching.

164
00:11:28,580 --> 00:11:30,890
Up till now and we will see you in the next lecture.