<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="form-header"> <h4 class="title">Enter your Credit Card Details</h4> </div> <div class="form-body"> <p>Amount Payable: $3,200</p> <!-- Card Number --> <p class="text">Card Number</p> <table style="width: inherit;"> <tr> <td class="col-3"><input type="text" class="card-number"></td> <td class="col-3"><input type="text" class="card-number"></td> <td class="col-3"><input type="text" class="card-number"></td> <td class="col-3"><input type="text" class="card-number"></td> </tr> </table> <table style="width: inherit;"> <tr> <td style="width: 75%;"><p class="text" >Expires</p> <td><p class="text" >Security Code</p> </tr> </table> <table style="width: inherit;"> <tr> <td class="col-3"><input type="text" class="card-number" placeholder="MM"></td> <td class="col-3"><input type="text" class="card-number" placeholder="YYYY"></td> <td class="col-3"></td> <td class="col-3"><input type="text" class="card-number" placeholder="CVV"></td> </tr> </table> <div> <label> <input type="checkbox" checked style="width: 20px; height: 20px;"> Save my card details. </label> </div> </div> <!-- Buttons --> <button type="submit" class="button"><b>Donate Now</b></button> </div>

/* Global */ * { box-sizing: border-box; } body, html { height: 100%; min-height: 100%; } body { font-family: 'Roboto', sans-serif; margin: 0; background-color: #ffffff; color:blue; } .form-header { height: 60px; padding: 30px 30px 0; background-color:#dddddd; } .form-header2 { height: 40px; background-color:#ffffff; } .form-body { height: auto; padding: 30px 30px 20px; width:100%; } /* Title */ .title { font-size: 18px; margin: 0; color:blue; } /* Text */ .text { font-size: 12px; margin: 0; color: #5e6977; padding-bottom:10px; } .col-3 { width: 25%; height:20px; } .col-4 { width: 10%; height:20px; } /* Card Number */ .card-number { margin-bottom: 20px; width:80%; border: 1px solid #000000; border-radius: 2px; height:40px; padding-left:5px; padding-right:5px; } .button { width:100% !important; height:100px; border:none; background-color:#dddddd; font-size:x-large; }