<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form class="form-horizontal" role="form"> <fieldset> <legend>Payment</legend> <div class="form-group"> <label class="col-sm-3 control-label" for="card-holder-name">Name on Card</label> <div class="col-sm-9"> <input type="text" class="form-control" name="card-holder-name" id="card-holder-name" placeholder="Card Holder's Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="card-number">Card Number</label> <div class="col-sm-9"> <input type="text" class="form-control" name="card-number" id="card-number" placeholder="Debit/Credit Card Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="expiry-month">Expiration Date</label> <div class="col-sm-9"> <div class="row"> <div class="col-xs-3"> <select class="form-control col-sm-2" name="expiry-month" id="expiry-month"> <option>Month</option> <option value="01">Jan (01)</option> <option value="02">Feb (02)</option> <option value="03">Mar (03)</option> <option value="04">Apr (04)</option> <option value="05">May (05)</option> <option value="06">June (06)</option> <option value="07">July (07)</option> <option value="08">Aug (08)</option> <option value="09">Sep (09)</option> <option value="10">Oct (10)</option> <option value="11">Nov (11)</option> <option value="12">Dec (12)</option> </select> </div> <div class="col-xs-3"> <select class="form-control" name="expiry-year"> <option value="13">2013</option> <option value="14">2014</option> <option value="15">2015</option> <option value="16">2016</option> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> <option value="20">2020</option> <option value="21">2021</option> <option value="22">2022</option> <option value="23">2023</option> </select> </div> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="cvv">Card CVV</label> <div class="col-sm-3"> <input type="text" class="form-control" name="cvv" id="cvv" placeholder="Security Code"> </div> </div> </fieldset> <fieldset> <legend>Billing Address</legend> <div class="form-group"> <label class="col-sm-3 control-label" for="address">Address</label> <div class="col-sm-9"> <input type="text" class="form-control" name="address" id="address" placeholder="Address"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="city-town">City/Town</label> <div class="col-sm-9"> <input type="text" class="form-control" name="city-town" id="city-town" placeholder="City / Town"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="state-prov">State/Province</label> <div class="col-sm-9"> <select class="form-control" name="state-prov" id="state-prov"> <option value="" disabled selected>Select your state / province</option> <optgroup label="province"> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland and Labrador</option> <option value="NS">Nova Scotia</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut</option> <option value="YT">Yukon</option> </optgroup> <optgroup label="state"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </optgroup> </select> </div> </div> <div class="form-group"> <div class="col-sm-1 col-sm-offset-3"> <label for="canada"><input id="canada" type="radio" name="canada" checked> Canada</label> </div> <div class="col-sm-1"> <label for="us"><input id="us" type="radio" name="us"> U.S.</label> </div> </div> <hr /> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="button" class="btn btn-success">Pay Now</button> </div> </div> </fieldset> </form> </div>