<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="cart-payment-content row"> <div class="col-md-6"> <form role="form"> <div class="cart-title"> <h4>Billing information</h4> </div> <div class="row"> <h6>Name</h6> <div class="col-sm-3 col"> <input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex="1"> </div> <div class="col-sm-3 col"> <input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex="2"> </div> </div> <div class="row"> <h6>Address</h6> <div class="col-sm-12 col col1"> <input id="addres" name="adress" type="text" placeholder="Adress with numbers" class="form-control input-md" required=""> </div> <div class="col-sm-12 col col2"> <input id="city" name="city" type="text" placeholder="City" class="form-control input-md" required=""> </div> <div class="col-sm-12 col col3"> <input id="zipcode" name="city" type="text" placeholder="Zip code" class="form-control input-md" required=""> </div> <div class="col-sm-12 col col4"> <input id="country" name="city" type="text" placeholder="Country" class="form-control input-md" required=""> </div> <div class="col-sm-12 col col5"> <input id="floor" name="city" type="text" placeholder="Floor (opt.)" class="form-control input-md" required=""> </div> <div class="col-sm-12 col col6"> <input id="door-number" name="city" type="text" placeholder="Door number (opt.)" class="form-control input-md" required=""> </div> </div> <div class="row"> <h6>Contact</h6> <div class="col-sm-6 col col7"> <input id="email" name="city" type="text" placeholder="Email address" class="form-control input-md" required=""> </div> <div class="col-sm-6 col col8"> <input id="phone-number" name="city" type="text" placeholder="Phone number" class="form-control input-md" required=""> </div> </div> <div class="row"> <h6>Create account</h6> <div class="col-sm-12"> <div class="control-group"> <div class="controls"> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="create" value=""> Create account for quicker future delivery </label> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="dontcreate" value=""> Don't create account </label> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col col8"> <input id="password" name="city" type="text" placeholder="Your password" class="form-control input-md" required=""> </div> </div> </form> </div> <div class="col-md-6"> <form role="form"> <div class="cart-title"> <h4>Order information</h4> </div> <div class="row"> <h6>Delivery address</h6> <div class="col-sm-12"> <div class="control-group"> <div class="controls"> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="same" value=""> Same as billing address </label> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="different" value=""> Different </label> </div> </div> </div> </div> <div class="row"> <h6>Note</h6> <div class="col-sm-12 col9 col"> <div class="form-group"> <textarea id="message" name="phone" class="form-control" required=""></textarea> </div> </div> </div> <div class="row"> <h6>Payment</h6> <div class="col-sm-12"> <div class="control-group"> <div class="controls"> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="byCard" value=""> Pay by card. </label> <label for="" class="checkbox-inline"> <input type="checkbox" name="iaccept" id="withCash" value=""> Pay in cash in spot. </label> </div> </div> </div> </div> </form> </div> </div> </div>

section.cart-allert { background-color: #F8F8F8; } section.cart-allert .collision {margin-top: 45px;} section.cart-allert .delivery-schedule { padding: 0; } section.cart-allert table { width:100%; margin: 38px 0; } .collision table tbody>tr>td:first-child { width: 100%; line-height: 50px; } #last-son-allert td { border-bottom: none !important; border-top: 1px solid #4A4A4A; line-height: 100px; } .collision h6 { color: #9B9B9B; } .cart-title { font-size: 18px; color: #0081FF; padding: 20px 0; } .cart-payment-content .col { margin: 10px 0 10px 0px; padding-right: 0; max-height: 32px; display:inline-block; } .cart-payment-content h6 {color: #9B9B9B;padding: 15px 0 3px 15px;margin: 0;margin-top: 10px;} .cart-payment-content .col1 { width: 28%; } .cart-payment-content .col2 { width: 26%; } .cart-payment-content .col3 { width: 18%; } .cart-payment-content .col4 { width: 26%; } .cart-payment-content .col5 { width: 18%; } .cart-payment-content .col6 { width: 22%; } .cart-payment-content input { font-size: 12px; padding: 6px 5px;} .cart-payment-content .col7 {width: 38.5%;} .cart-payment-content .col8 {width: 32%;} .cart-payment-content .col9 {max-width: 480px;} .cart-payment-content .checkbox-inline { margin-right: 10px; padding-top: 15px; padding-bottom: 15px; } .cart-payment-content textarea { max-height: 96px; } .signin { background-color: #F8F7F7; padding: 40px 0; } .signin h4 { display: inline-block;} .signin .blue-btn { margin: 0 25px; padding: 7px 15px; } .paymentOr { background-color: #F8F7F7; padding: 40px 0; } .paymentOr .add-btn { padding: 7px 22px; } .paymentOr .view-btn { padding: 7px 23px; }