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

2
00:00:06,980 --> 00:00:11,960
In this lecture we're going to be adding the final fields for our payment section here on the checkout

3
00:00:11,960 --> 00:00:17,740
page allowing the user to put in their credit card number the expiration date et cetera.

4
00:00:17,750 --> 00:00:22,680
So let's go ahead and start filling that and now we can go ahead and open the e-mail Heidi output.

5
00:00:22,700 --> 00:00:25,330
And I'm going to zoom in just a little here.

6
00:00:25,340 --> 00:00:25,760
Okay great.

7
00:00:25,760 --> 00:00:30,430
So I'm going to scroll down to where we were working on the checkout page.

8
00:00:30,440 --> 00:00:35,000
We have our fields from the credit card debit card and people.

9
00:00:35,090 --> 00:00:38,750
And next let's go ahead and make a new row with columns.

10
00:00:38,750 --> 00:00:47,420
And this is going to still be in our form but it's going to be the columns on its own row for putting

11
00:00:47,420 --> 00:00:49,940
in the name the credit card number etc..

12
00:00:49,970 --> 00:00:52,640
So let's go ahead and start building that with a div.

13
00:00:52,640 --> 00:00:59,810
Class row I go ahead and close off that div immediately and in every row we need columns just like in

14
00:00:59,810 --> 00:01:03,380
every column we need to put in rows.

15
00:01:03,470 --> 00:01:11,390
So let's go ahead and put in a div of class column and for the column we are going to specify the size

16
00:01:11,390 --> 00:01:15,320
to 6 which is 30 percent of the total width of the element.

17
00:01:15,410 --> 00:01:21,560
And we're also going to space out all the elements inside of this div by using and b 3 which is typically

18
00:01:22,040 --> 00:01:26,200
pretty standard sizing of having these three as the spacing.

19
00:01:26,960 --> 00:01:27,290
OK.

20
00:01:27,290 --> 00:01:32,360
Next we're going to make an input and this is going to be for the user to put in their name.

21
00:01:32,360 --> 00:01:35,960
So we're gonna make an input field and it's going to be a type of text.

22
00:01:35,960 --> 00:01:43,340
This time we've seen different types of inputs like radio button of type radio and numbers but for the

23
00:01:43,340 --> 00:01:49,910
full name we're going to go back to making input field of type text which will be a single line field

24
00:01:49,910 --> 00:01:52,150
for the user to put in their name.

25
00:01:52,160 --> 00:01:52,550
Okay great.

26
00:01:52,560 --> 00:01:53,270
So we have a type.

27
00:01:53,270 --> 00:02:00,110
We also have to add a class which is going to be form control and we're also to put in an idea which

28
00:02:00,110 --> 00:02:03,320
is going to be cardholder.

29
00:02:03,320 --> 00:02:03,770
Okay great.

30
00:02:03,770 --> 00:02:09,440
We're also going to add in a label and it's going to be for that cardholder element and I'm going to

31
00:02:09,440 --> 00:02:15,830
go ahead and close off the label tag with a closing tag and let's go ahead and put in the actual text

32
00:02:15,890 --> 00:02:24,110
of this label which will be just above the input field and that's going to be the name of cardholder.

33
00:02:24,110 --> 00:02:26,280
Okay great.

34
00:02:26,300 --> 00:02:31,250
So let's go ahead and make another div just below this and it's going to be another column because again

35
00:02:31,250 --> 00:02:36,590
we're making a roast we're going to put in columns into the row so we're gonna get a day of class of

36
00:02:36,590 --> 00:02:40,990
call and D6 and this will make it again 50 percent.

37
00:02:41,030 --> 00:02:46,580
So we're gonna have just two columns in one row and therefore we're splitting you with evenly between

38
00:02:46,580 --> 00:02:53,060
them let's add spacing as well just like we did for the previous div for consistency and this will be

39
00:02:53,060 --> 00:02:54,200
the actual card number.

40
00:02:54,230 --> 00:03:01,330
So the input is going to be of type text again could also make it numbers.

41
00:03:01,940 --> 00:03:13,030
And then we're going to make it class form control and it's going to be for the idea of card number.

42
00:03:13,040 --> 00:03:14,660
Okay great.

43
00:03:14,660 --> 00:03:24,920
And now let's make a label and the label is going to be for the I.D. card number and let's go ahead

44
00:03:24,920 --> 00:03:30,380
and close off that label tag just like we did for the previous div.

45
00:03:30,410 --> 00:03:37,520
So following the same pattern going to put in card number.

46
00:03:37,520 --> 00:03:38,680
Okay.

47
00:03:38,770 --> 00:03:41,570
Now this is going to be for when there is a card selected.

48
00:03:41,570 --> 00:03:49,130
If there was paper selected we would add the people embed functionality but that would be more on the

49
00:03:49,130 --> 00:03:51,830
back end to the front end is more concerned with the design.

50
00:03:51,950 --> 00:03:58,700
So you can just pick one of the cards to use in our design and then implement the changing cards with

51
00:03:58,790 --> 00:04:00,220
backend.

52
00:04:00,230 --> 00:04:00,770
Okay great.

53
00:04:00,800 --> 00:04:03,740
So we have our label for the card number.

54
00:04:03,950 --> 00:04:06,790
Now that is the end of what we need for that row.

55
00:04:06,830 --> 00:04:08,340
Let's go ahead and make another row.

56
00:04:08,490 --> 00:04:14,570
And this time it will allow the user to put in their expiration date of the card and whether or not

57
00:04:15,110 --> 00:04:22,250
they have a security code put in the security code for the card which there should almost always be.

58
00:04:22,310 --> 00:04:23,080
Okay.

59
00:04:23,420 --> 00:04:27,560
So that is going to be outside of that div B as this is a div for the row.

60
00:04:27,560 --> 00:04:32,040
So we're gonna make another rule here because we want this all to me on a new line.

61
00:04:32,300 --> 00:04:37,790
Let's go ahead and close off that div immediately and in the div or going to make a column so div class

62
00:04:38,060 --> 00:04:39,920
call M.D. 3.

63
00:04:39,950 --> 00:04:47,720
Now we're making it of size three out of twelve point five percent because for this give we don't need

64
00:04:47,720 --> 00:04:53,680
to have as wide of a column because we're just putting in the expiration date and the security codes.

65
00:04:53,690 --> 00:05:00,690
Those are typically smaller numbers than something like a name or a number of a credit card.

66
00:05:01,380 --> 00:05:01,660
Okay.

67
00:05:01,700 --> 00:05:04,030
So I'm also going to add in some default spacing.

68
00:05:04,120 --> 00:05:04,600
Why not.

69
00:05:06,310 --> 00:05:08,640
OK great.

70
00:05:08,650 --> 00:05:14,890
Let's go ahead and close off that div and that is the first column and we're going to open up an input

71
00:05:14,890 --> 00:05:15,880
type.

72
00:05:15,880 --> 00:05:20,530
This is going to be the user the user input of the expiration date.

73
00:05:20,530 --> 00:05:23,710
So you can just make it a type text as well.

74
00:05:23,710 --> 00:05:29,610
And we're going to give it the idea of card or expiration date and then we're going to give it because

75
00:05:29,710 --> 00:05:31,990
form control to style it.

76
00:05:32,050 --> 00:05:34,480
And that is all that we need that is required.

77
00:05:34,480 --> 00:05:41,400
You could also add in more classes and more parameters here if you'd like.

78
00:05:41,410 --> 00:05:41,580
OK.

79
00:05:41,590 --> 00:05:48,340
Let's also add in a label we that it's going to be a label for the expiration date and then we're going

80
00:05:48,340 --> 00:05:55,650
to also add in the closing tag for the label as well as the text expiration.

81
00:05:55,650 --> 00:06:00,580
And typically it's good to have a hyphen between words in your I.D. name so what you just change that

82
00:06:00,670 --> 00:06:02,840
to make it a bit more readable.

83
00:06:02,860 --> 00:06:03,340
Okay great.

84
00:06:03,340 --> 00:06:10,510
So now we have one more column in a new row so let's add in another column for the security code.

85
00:06:10,540 --> 00:06:18,280
So I'm going to open up a another div and it's going to be the same word for consistency so M D 3 and

86
00:06:18,280 --> 00:06:21,310
then and b 3 for the spacing.

87
00:06:22,060 --> 00:06:28,150
Okay great I'm going to close off that column and then I'm going to make an input of type text and it's

88
00:06:28,150 --> 00:06:35,710
going to have the idea of the security code.

89
00:06:35,710 --> 00:06:45,400
So that going to be the cards code and then I'm going to close that off and also add the class of control

90
00:06:45,400 --> 00:06:45,760
right.

91
00:06:45,790 --> 00:06:51,310
Yes form control you want to have the class from control on all of your elements for consistency.

92
00:06:51,880 --> 00:06:52,360
Okay great.

93
00:06:52,360 --> 00:06:58,570
And I also want to add in a label for that I.D. which is security code I'm going to add a hyphen again

94
00:06:58,600 --> 00:06:59,230
just like that.

95
00:06:59,960 --> 00:07:00,220
Okay.

96
00:07:00,230 --> 00:07:06,720
And I'm going to close off that label and then in here type in card code.

97
00:07:06,760 --> 00:07:07,360
Okay.

98
00:07:07,480 --> 00:07:12,430
This is called differently in different countries like CSC or CTV depending on the card.

99
00:07:12,430 --> 00:07:14,910
So just leave it as card code for now.

100
00:07:15,370 --> 00:07:15,790
Okay great.

101
00:07:15,790 --> 00:07:22,390
So now we just set up the new rows for the name the card holder the card number the expiration date

102
00:07:22,720 --> 00:07:26,130
and the card code or security code.

103
00:07:26,220 --> 00:07:27,640
It sounds better security code.

104
00:07:27,820 --> 00:07:32,950
It's up to you what you would like to have at this label or up to what the client requests of you of

105
00:07:32,950 --> 00:07:33,490
course.

106
00:07:33,490 --> 00:07:34,010
OK.

107
00:07:34,030 --> 00:07:40,360
One more thing we can add is a button for the user to purchase the product because right now we have

108
00:07:40,360 --> 00:07:45,750
them entering all of their information but we don't have a submit button to actually submit the form.

109
00:07:45,760 --> 00:07:51,430
So we're gonna add that just above the forms closing tag we're going to add in another button and it's

110
00:07:51,430 --> 00:07:58,380
going to be of class button which is the bootstrap class as well as Button primary and button large

111
00:07:58,390 --> 00:08:03,400
make a big add in button block and we also have to add in the type of to submit which means that we're

112
00:08:03,400 --> 00:08:08,810
going to be submitting this form and submit won't actually work unless you implement backend functionality.

113
00:08:08,920 --> 00:08:10,990
But the design will be set up here.

114
00:08:11,070 --> 00:08:11,390
Okay.

115
00:08:11,400 --> 00:08:14,320
And that's all we need for this course.

116
00:08:14,320 --> 00:08:19,390
So let's go ahead and add something like submit as the text.

117
00:08:19,390 --> 00:08:19,870
Okay great.

118
00:08:19,870 --> 00:08:23,520
So now we have a submit button let's go ahead and test how this looks in the output.

119
00:08:23,860 --> 00:08:24,110
OK.

120
00:08:24,130 --> 00:08:29,560
So I'm going to go to the output and just scroll down here and as you can see now I have some new input

121
00:08:29,560 --> 00:08:34,380
fields for the name of the card holder the card number the expiration and the security code as well

122
00:08:34,410 --> 00:08:35,550
as this takes a man button.

123
00:08:35,560 --> 00:08:39,670
So I'm going to just toggle the extra mile to see how this looks on the large screen and I'm going to

124
00:08:39,670 --> 00:08:46,930
zoom out to 100 percent and OK the security code could be a bit longer because this text security code

125
00:08:46,930 --> 00:08:48,400
is quite large.

126
00:08:48,430 --> 00:08:52,870
That's another thing you could fine tune but all of these inputs are working which is great.

127
00:08:52,960 --> 00:08:54,700
OK excellent.

128
00:08:54,700 --> 00:08:56,020
So you notice a difference.

129
00:08:56,020 --> 00:09:01,400
These are all input fields but this is of type text and this is of type radio which changed how they

130
00:09:01,450 --> 00:09:07,210
looked and we have this wide Submit button because it is large Submit button as you can see when we

131
00:09:07,210 --> 00:09:13,060
clicked submit the first name was required which means getting a prompt to fill out that field we put

132
00:09:13,060 --> 00:09:15,090
in a name and then click submit.

133
00:09:15,280 --> 00:09:18,220
We're going to again be asked to continue filling out all the fields.

134
00:09:18,220 --> 00:09:18,490
Great.

135
00:09:18,490 --> 00:09:20,370
Thank you all for watching.

136
00:09:20,380 --> 00:09:26,440
That is all that we need for this lecture in the next lecture we can add some fine tuning features like

137
00:09:27,040 --> 00:09:32,050
I highly recommend you change the padding depending on how your preview looks because of course depending

138
00:09:32,050 --> 00:09:37,520
on the browser you're previewing in your website will look different.

139
00:09:37,570 --> 00:09:46,200
So some obvious fine tuning are to change the code of this check out here as well as to change the padding

140
00:09:46,200 --> 00:09:49,110
here on payment which is a bit wide.

141
00:09:49,510 --> 00:09:50,860
OK great.

142
00:09:50,860 --> 00:09:52,590
So we can change all that in the next lecture.

143
00:09:52,600 --> 00:09:53,950
But for now this is looking quite great.

144
00:09:53,950 --> 00:10:01,420
We've added a lot of fields here for our landing page we have now this pricing tab this card as well

145
00:10:01,450 --> 00:10:07,540
as this out page with inputs for checking out and putting in all of your information.

146
00:10:07,540 --> 00:10:09,450
These are quite a lot of fields.

147
00:10:09,460 --> 00:10:12,310
Congratulations on having made it this far.

148
00:10:12,310 --> 00:10:14,830
Thank you all for watching and we will see you in the next lecture.