Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Well done!

You have completed Bootstrap Basics!

Sign up for Treehouse Back to Library

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.

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

    So the final section of the form we're going to build is the payment 0:00
    information section. 0:00
    Let's start by adding an hr above the closing form tag. 0:03
    I'll add the class mb-4 to give the hr a bottom margin of 1.5 REM. 0:08
    Below that, I will add an h5 with the text Payment Info. 0:15
    And I'll give the heading a bottom margin of two REM as well, with the class mb-4. 0:19
    As you've seen, Bootstrap displays form-controls vertically by default. 0:28

    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