🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

A new Figma course has dropped!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Structured Form Layouts with the Grid

7:01 with Guil Hernandez

In this video, we'll use Bootstrap's grid classes to create the form's "Payment Info" section.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Grid code snippet

<div class="">
  <div class="">
    <label for="cc-num">Card Number:</label>
    <input class="form-control" id="cc-num" type="text">
  </div>

  <div class="">
    <label for="zip">Zip Code:</label>
    <input class="form-control" id="zip" type="text">
  </div>

  <div class="">
    <label for="cvv">CVV:</label>
    <input class="form-control" id="cvv" type="text">
  </div>
</div>

Expiration month snippet

<select class="custom-select form-control" id="exp-month">
  <option value="1">1 - January</option>
  <option value="2">2 - February</option>
  <option value="3">3 - March</option>
  <option value="4">4 - April</option>
  <option value="5">5 - May</option>
  <option value="6">6 - June</option>
  <option value="7">7 - July</option>
  <option value="8">8 - August</option>
  <option value="9">9 - September</option>
  <option value="10">10 - October</option>
  <option value="11">11 - November</option> 
  <option value="12">12 - December</option>
</select>

Expiration year snippet

<select class="custom-select form-control" id="exp-year">
  <option value="2016">2016</option>
  <option value="2017">2017</option>
  <option value="2018">2018</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
</select>

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up