1
00:00:00,110 --> 00:00:03,931
A good, informative JavaScript conference
with a star-studded speaker lineup,

2
00:00:03,931 --> 00:00:06,960
like Full Stack Conf,
should charge an admission price.

3
00:00:06,960 --> 00:00:09,840
So the final section of the form
we're going to build is the payment

4
00:00:09,840 --> 00:00:10,700
information section.

5
00:00:12,720 --> 00:00:17,120
Let's start by adding an hr
above the closing form tag.

6
00:00:17,120 --> 00:00:22,670
I'll add the class mb-4 to give
the hr a bottom margin of 1.5 REM.

7
00:00:24,280 --> 00:00:28,900
Below that, I will add an h5
with the text Payment Info.

8
00:00:28,900 --> 00:00:35,140
And I'll give the heading a bottom margin
of two REM as well, with the class mb-4.

9
00:00:37,492 --> 00:00:43,610
As you've seen, Bootstrap displays
form-controls vertically by default.

10
00:00:43,610 --> 00:00:47,151
So the labels and controls appear
stacked on top of each other.

11
00:00:47,151 --> 00:00:51,309
But you can also take advantage of
Bootstrap's grid classes to create more

12
00:00:51,309 --> 00:00:53,530
structured form layouts.

13
00:00:53,530 --> 00:00:58,680
For instance, the payment section should
display the credit card, zip code,

14
00:00:58,680 --> 00:01:05,100
and CVV text fields on the same line, with
the labels above each field, like this.

15
00:01:05,100 --> 00:01:09,700
So you can use Bootstrap's grid system to
constrain form-groups to a desired width.

16
00:01:11,630 --> 00:01:14,952
First, I'll paste a new code
snippet below the Payment heading.

17
00:01:14,952 --> 00:01:18,720
And you can copy this snippet
from the teacher's notes.

18
00:01:21,120 --> 00:01:26,091
The div contains three
nested developments,

19
00:01:26,091 --> 00:01:31,317
each wrapping a form label and
form-control for

20
00:01:31,317 --> 00:01:35,023
Card Number, Zip Code, and CVV.

21
00:01:35,023 --> 00:01:40,396
To establish the grid,
I'll give the parent div the class row.

22
00:01:40,396 --> 00:01:42,044
Then, to create the desired widths for
each field,

23
00:01:42,044 --> 00:01:44,746
I'm going to apply column layout classes,
starting in the large breakpoint range.

24
00:01:44,746 --> 00:01:46,733
So I'll give the first div the class
col-lg-6 to span it 6 columns.

25
00:01:46,733 --> 00:01:52,359
And the two remaining columns will

26
00:01:52,359 --> 00:01:57,791
each share the remaining space,

27
00:01:57,791 --> 00:02:01,869
with the class col-lg.

28
00:02:06,021 --> 00:02:10,428
Over in the browser,
we see that the columns appear

29
00:02:10,428 --> 00:02:15,349
stacked in the extra small,
small, and medium ranges,

30
00:02:15,349 --> 00:02:22,210
then display side by side on the same
line in the large and extra large range.

31
00:02:22,210 --> 00:02:23,950
This is exactly the layout we want.

32
00:02:26,645 --> 00:02:31,558
Let's also give each column
the class form-group to

33
00:02:31,558 --> 00:02:36,370
apply a bottom margin to each label and
input group.

34
00:02:47,971 --> 00:02:52,990
So far, we've used the class
row to establish the grid.

35
00:02:52,990 --> 00:02:57,737
Well, you can also swap row for form-row.

36
00:02:57,737 --> 00:03:01,220
A form-row is a variation
of the standard grid row,

37
00:03:01,220 --> 00:03:04,360
that overrides the default column gutters.

38
00:03:04,360 --> 00:03:08,350
So it removes the gutters from
each column to create tighter and

39
00:03:08,350 --> 00:03:10,150
more compact layouts.

40
00:03:10,150 --> 00:03:18,309
So back in my code, when I give
the Payment Info div the class form-row,

41
00:03:18,309 --> 00:03:23,700
Notice how it brings
the form-controls together.

42
00:03:25,500 --> 00:03:30,520
We have one more set of form-controls to
create, the expiration date select fields.

43
00:03:30,520 --> 00:03:37,510
Back in index.html,
right below the form-row we just added,

44
00:03:37,510 --> 00:03:42,850
I’ll create a new div
with the class form-row.

45
00:03:42,850 --> 00:03:45,650
I'm going to include a label element

46
00:03:45,650 --> 00:03:50,450
as a direct child of this row
because this label will be for

47
00:03:50,450 --> 00:03:54,800
both the month and year select menus,
as you can see in the mock-up.

48
00:03:54,800 --> 00:04:00,296
So I'll set the label
text to Expiration Date.

49
00:04:00,296 --> 00:04:05,824
Then I'll nest two divs,

50
00:04:05,824 --> 00:04:12,107
with the class form-group,

51
00:04:12,107 --> 00:04:15,884
below the label.

52
00:04:19,766 --> 00:04:25,847
So this form-row needs to display
the Expiration Date label on one line and

53
00:04:25,847 --> 00:04:32,175
the expiration month and year select
menus side by side on the next line.

54
00:04:32,175 --> 00:04:37,259
So to display the label on a separate
line, I'll set it to span the width of 12

55
00:04:37,259 --> 00:04:43,213
columns, starting in the large breakpoint
range, by giving it the class col-lg-12.

56
00:04:43,213 --> 00:04:49,520
And this is going to wrap
the form-groups onto the next line.

57
00:04:49,520 --> 00:04:54,216
So now I can display both form-groups
on the same line by giving the first

58
00:04:54,216 --> 00:05:00,070
form-group the class col-lg-8, and

59
00:05:00,070 --> 00:05:05,510
the second one, the class col-lg,
to take up any remaining space.

60
00:05:06,830 --> 00:05:11,750
So now, to display the expiration
month menu, I'll paste one of

61
00:05:11,750 --> 00:05:16,930
Bootstrap's custom-select
menus inside the form-group.

62
00:05:16,930 --> 00:05:20,480
Here, I've already included all
12 expiration month options,

63
00:05:20,480 --> 00:05:22,290
which you can copy from
the teacher's notes.

64
00:05:24,205 --> 00:05:27,611
Then I'll paste another
custom-select menu,

65
00:05:27,611 --> 00:05:31,775
for the expiration year,
inside the second form-group.

66
00:05:45,400 --> 00:05:47,800
Finally, let's create
the form's submit button.

67
00:05:47,800 --> 00:05:53,746
I'll add one more hr just
above the closing form tag and

68
00:05:53,746 --> 00:05:59,830
apply a bottom margin to the hr,
with the class mb-4.

69
00:05:59,830 --> 00:06:03,697
Then I'll go ahead and copy and

70
00:06:03,697 --> 00:06:08,607
paste a submit button code snippet from

71
00:06:08,607 --> 00:06:13,365
the form docs, paste it below the hr,

72
00:06:13,365 --> 00:06:17,560
and change the text to Register.

73
00:06:19,960 --> 00:06:21,960
I wanna display a large submit button.

74
00:06:23,100 --> 00:06:26,386
So I'll add the class btn-lg.

75
00:06:26,386 --> 00:06:30,064
Let's have a look.

76
00:06:34,400 --> 00:06:36,150
And there you have it.

77
00:06:36,150 --> 00:06:39,710
Our responsive registration
form is now complete.

78
00:06:41,430 --> 00:06:45,110
Now, just like the signup form
you added earlier, you or

79
00:06:45,110 --> 00:06:49,230
another developer would still need to
program the registration form to actually

80
00:06:49,230 --> 00:06:53,280
collect all this information, using
a programming language like JavaScript.

81
00:06:53,280 --> 00:06:58,101
In the next video, we'll wrap things
up by adding custom CSS to our site.