Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Structured Form Layouts with the Grid7: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>
You need to sign up for Treehouse in order to download course files.Sign up