<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"> <div class="row"> <img class="spi-header" src="" >SPI Header <hr/> <h1>Smart Property Investment Magazine</h1> <hr/> <p>If you are having any problems subscribing, please email subscriptions@spionline.com.au or phone Lauren Donnelly on 02 8045 2047.</p> <p>Order before 21 November 2014 to receive the January issue, delivered early December.</p> <p>Your bonus pack will be sent via email to the email address you provide.</p> <strong>Purchase Summary:</strong> <h2 class="bg-success">Today's Total: $74.95 AUD</h2> <div class="form-group col-md-12 bg-primary"> <label class="control-label" for="billinginformation">Shipping Information</label> </div> <div class="shipping-info"> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="firstname">First Name</label> <div class="controls"> <input id="firstname" name="firstname" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="lastname">Last Name</label> <div class="controls"> <input id="lastname" name="lastname" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="shippingaddress1">Shipping Address 1</label> <div class="controls"> <input id="shippingaddress1" name="shippingaddress1" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <label class="control-label" for="shippingaddress2">Shipping Address 2</label> <div class="controls"> <input id="shippingaddress2" name="shippingaddress2" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="shippingcountry">Shipping Country</label> <div class="controls"> <div class="controls"> <select id="shippingcountry" name="shippingcountry" class="input-xlarge"> <option>Please Select</option> <option>Australia</option> </select> </div> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="shippingstate">Shipping State</label> <div class="controls"> <select id="shippingstate" name="shippingstate" class="input-xlarge"> <option>Please Select</option> <option>Australian Capital Territory</option> <option>New South Wales</option> <option>Northern Territory</option> <option>Queensland</option> <option>South Australia</option> <option>Tasmania</option> <option>Victoria</option> <option>Western Australia</option> <option>Other</option> </select> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="shippingcity">Shipping City</label> <div class="controls"> <input id="shippingcity" name="shippingcity" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="postcode">Post Code</label> <div class="controls"> <input id="postcode" name="postcode" type="text" placeholder="" class="form-control" required=""> </div> </div> <hr/> <div class="form-group col-md-12 bg-primary"> <div class="control-group"> <div class="controls"> <label class="control-label" for="billinginformation">Billing Information</label> <label class="checkbox" for="billinginformation"> <input type="checkbox" name="billinginformation" id="billinginformation" value="Use Shipping Address"> Use Shipping Address </label> </div> </div> </div> <div class="form-group col-md-6"> <div class="control-group"> <span class="required-lbl">* </span><label class="control-label" for="firstnameonaccount">First Name on Account</label> <div class="controls"> <input id="firstnameonaccount" name="firstnameonaccount" type="text" placeholder="" class="form-control" required=""> </div> </div> </div> <div class="form-group col-md-6"> <div class="control-group"> <span class="required-lbl">* </span><label class="control-label" for="lastnameonaccount">Last Name on Account</label> <div class="controls"> <input id="lastnameonaccount" name="lastnameonaccount" type="text" placeholder="" class="form-control" required=""> </div> </div> </div> <div class="form-group col-md-6"> <div class="control-group"> <span class="required-lbl">* </span><label class="control-label" for="cardnumber">Card Number</label> <div class="controls"> <input id="cardnumber" name="cardnumber" type="text" placeholder="" class="form-control" required=""> </div> </div> </div> <div class="form-group col-md-6" style="height: 60px;"> Visa and master card Images </div> <div class="form-group col-md-6 card-expiry"> <div class="control-group col-md-4"> <span class="required-lbl">* </span><label class="control-label" for="cvv">CVV</label> <div class="controls"> <input id="cvv" name="cvv" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="control-group col-md-4"> <div class="control-group"> <label class="control-label" for="month">Expiration Date</label> <div class="controls"> <select id="month" name="month" class="input-xlarge"> <option>Select Month</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> </div> </div> <div class="control-group col-md-4"> <div class="control-group"> <label class="control-label" for="selectyear"></label> <div class="controls"> <select id="selectyear" name="selectyear" class="input-xlarge"> <option>Select Year</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> </select> </div> </div> </div> </div> <div class="form-group col-md-6"> </div> <hr/> <div class="form-group col-md-12 bg-primary"> <label class="control-label" for="billinginformation">Billing Address</label> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="billingaddress1">Address 1</label> <div class="controls"> <input id="billingaddress1" name="billingaddress1" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <label class="control-label" for="billingaddress2">Address 2</label> <div class="controls"> <input id="billingaddress2" name="billingaddress2" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="billingcountry">Billing Country</label> <div class="controls"> <div class="controls"> <select id="billingcountry" name="billingcountry" class="input-xlarge"> <option>Please Select</option> <option>Australia</option> </select> </div> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="billingstate">Billing State</label> <div class="controls"> <select id="billingstate" name="billingstate" class="input-xlarge"> <option>Please Select</option> <option>Australian Capital Territory</option> <option>New South Wales</option> <option>Northern Territory</option> <option>Queensland</option> <option>South Australia</option> <option>Tasmania</option> <option>Victoria</option> <option>Western Australia</option> <option>Other</option> </select> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="billingcity">Billing City</label> <div class="controls"> <input id="billingcity" name="billingcity" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="billingpostcode">Post Code</label> <div class="controls"> <input id="billingpostcode" name="billingpostcode" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-12 bg-primary"> <label class="control-label" for="contactinformation">Contact Information:</label> </div> <div class="form-group col-md-6"> <span class="required-lbl">* </span><label class="control-label" for="emailaddress">Email Address</label> <div class="controls"> <input id="email" name="email" type="email" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <label class="control-label" for="phone">Phone</label> <div class="controls"> <input id="phone" name="phone" type="number" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-6"> <label class="control-label" for="organization">Organization</label> <div class="controls"> <input id="organization" name="organization" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-12 bg-primary"> <label class="control-label" for="contactinformation">Additional Information:</label> </div> <label>* To avoid duplication, Type "YES" if you are a current subscriber wishing to extend your subscription OR "NO" if you don’t have an active subscription</label> <div class="form-group col-md-6"> <div class="controls"> <input id="additionalinfo" name="additionalinfo" type="text" placeholder="" class="form-control" required=""> </div> </div> <div class="form-group col-md-12"> <div class="control-group"> <label class="control-label" for="iaccept"></label> <div class="controls"> <label class="checkbox" for="iaccept-0"> <input type="checkbox" name="iaccept" id="iaccept-0" value="I accept the Teams and conditions"> I accept the <a href="">Teams and conditions</a> </label> </div> </div> </div> <div class="form-group col-md-12"> <div class="control-group confirm-btn"> <label class="control-label" for="placeorderbtn"></label> <div class="controls"> <button id="placeorderbtn" name="placeorderbtn" class="btn btn-primary">Place My Order</button> </div> </div> </div> </div> </div> </div>

h2.bg-success{ padding: 15px; } .required-lbl{ color: red; } label[for="billinginformation"]{ display: inline; float: left; margin:0px 45px 0px 0px; } .card-expiry{ padding-left: 0px; } .confirm-btn{ float:right; } .bg-primary{ padding: 10px; } label{ margin-bottom :0px; }