Preview
Video Player
00:00
00:00
Structured Form Layouts with the Grid
7:01In this video, we'll use Bootstrap's grid classes to create the form's "Payment Info" section.
A good, informative JavaScript conference
with a star-studded speaker lineup,
0:00
like Full Stack Conf,
should charge an admission price.
0:03
So the final section of the form
we're going to build is the payment
0:06
information section.
0:09
Let's start by adding an hr
above the closing form tag.
0:12
I'll add the class mb-4 to give
the hr a bottom margin of 1.5 REM.
0:17
Below that, I will add an h5
with the text Payment Info.
0:24
And I'll give the heading a bottom margin
of two REM as well, with the class mb-4.
0:28
As you've seen, Bootstrap displays
form-controls vertically by default.
0:37
So the labels and controls appear
stacked on top of each other.
0:43
But you can also take advantage of
Bootstrap's grid classes to create more
0:47
structured form layouts.
0:51
For instance, the payment section should
display the credit card, zip code,
0:53
and CVV text fields on the same line, with
the labels above each field, like this.
0:58
So you can use Bootstrap's grid system to
constrain form-groups to a desired width.
1:05
First, I'll paste a new code
snippet below the Payment heading.
1:11
And you can copy this snippet
from the teacher's notes.
1:14
The div contains three
nested developments,
1:21
each wrapping a form label and
form-control for
1:26
Card Number, Zip Code, and CVV.
1:31
To establish the grid,
I'll give the parent div the class row.
1:35
Then, to create the desired widths for
each field,
1:40
I'm going to apply column layout classes,
starting in the large breakpoint range.
1:42
So I'll give the first div the class
col-lg-6 to span it 6 columns.
1:44
And the two remaining columns will
1:46
each share the remaining space,
1:52
with the class col-lg.
1:57
Over in the browser,
we see that the columns appear
2:06
stacked in the extra small,
small, and medium ranges,
2:10
then display side by side on the same
line in the large and extra large range.
2:15
This is exactly the layout we want.
2:22
Let's also give each column
the class form-group to
2:26
apply a bottom margin to each label and
input group.
2:31
So far, we've used the class
row to establish the grid.
2:47
Well, you can also swap row for form-row.
2:52
A form-row is a variation
of the standard grid row,
2:57
that overrides the default column gutters.
3:01
So it removes the gutters from
each column to create tighter and
3:04
more compact layouts.
3:08
So back in my code, when I give
the Payment Info div the class form-row,
3:10
Notice how it brings
the form-controls together.
3:18
We have one more set of form-controls to
create, the expiration date select fields.
3:25
Back in index.html,
right below the form-row we just added,
3:30
I’ll create a new div
with the class form-row.
3:37
I'm going to include a label element
3:42
as a direct child of this row
because this label will be for
3:45
both the month and year select menus,
as you can see in the mock-up.
3:50
So I'll set the label
text to Expiration Date.
3:54
Then I'll nest two divs,
4:00
with the class form-group,
4:05
below the label.
4:12
So this form-row needs to display
the Expiration Date label on one line and
4:19
the expiration month and year select
menus side by side on the next line.
4:25
So to display the label on a separate
line, I'll set it to span the width of 12
4:32
columns, starting in the large breakpoint
range, by giving it the class col-lg-12.
4:37
And this is going to wrap
the form-groups onto the next line.
4:43
So now I can display both form-groups
on the same line by giving the first
4:49
form-group the class col-lg-8, and
4:54
the second one, the class col-lg,
to take up any remaining space.
5:00
So now, to display the expiration
month menu, I'll paste one of
5:06
Bootstrap's custom-select
menus inside the form-group.
5:11
Here, I've already included all
12 expiration month options,
5:16
which you can copy from
the teacher's notes.
5:20
Then I'll paste another
custom-select menu,
5:24
for the expiration year,
inside the second form-group.
5:27
Finally, let's create
the form's submit button.
5:45
I'll add one more hr just
above the closing form tag and
5:47
apply a bottom margin to the hr,
with the class mb-4.
5:53
Then I'll go ahead and copy and
5:59
paste a submit button code snippet from
6:03
the form docs, paste it below the hr,
6:08
and change the text to Register.
6:13
I wanna display a large submit button.
6:19
So I'll add the class btn-lg.
6:23
Let's have a look.
6:26
And there you have it.
6:34
Our responsive registration
form is now complete.
6:36
Now, just like the signup form
you added earlier, you or
6:41
another developer would still need to
program the registration form to actually
6:45
collect all this information, using
a programming language like JavaScript.
6:49
In the next video, we'll wrap things
up by adding custom CSS to our site.
6:53