<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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" style="width:60%"> <h1>I want these products</h1> <table class="table"> <thead> <tr> <th> <h3>Group 1</h3> </th> </tr> </thead> <tbody> <tr> <td>Product 1</td> <td>Small</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Medium</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Large</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Ultra</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> </tr> <tr> <td>Product 2</td> <td>Small</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Medium</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Large</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Ultra</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> </tr> </tbody> </table> <table class="table"> <thead> <tr> <th> <h3>Group 2</h3> </th> </tr> </thead> <tbody> <tr> <td>Product 3</td> <td>Small</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Medium</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Large</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Ultra</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> </tr> <tr> <td>Product 4</td> <td>Small</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Medium</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Large</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> <td>Ultra</td> <td> <input type="number" style="width: 45px; padding: 1px" value="0"> </td> </tr> </tbody> </table> <h3>Total: X pieces, Y USD</h3> <br> <br> <h1>I want to get them monthly for</h1> <select> <option>1 month</option> <option>3 months</option> <option>6 months</option> <option>12 months</option> </select> <br> <br> <h1>My details are</h1> <form> <label>Name</label> <input type="text" class="input-medium"> <label>Phone</label> <input type="text" class="input-medium"> <label>E-mail</label> <input type="text" class="input-medium"> <label>Address</label> <input type="text" class="input-medium"> </form> <button class="btn btn-block btn-success btn-large">Place order</button> </div>