<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="order-form my-4 mx-4"> <div class="container pt-4"> <div class="row"> <div class="col-12"> <h1>Place Your Order</h1> <span>with some explanation below</span> <hr class="mt-1"> </div> </div> <div class="row"> <div class="col col-12"> <form class="form-horizontal" action="#" method="post"> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="email">Vendor Id:</label> <input type="text" class="form-control" id="vid" placeholder="" name="vid"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Date:</label> <input type="date" class="form-control" id="email" placeholder="" name="date"> </div> <div class="col"> <label class="control-label col-sm-6" for="email" style="color: red">Invoice No:</label> <input type="text" class="form-control" id="invoice" placeholder="" name="invoice"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="email">Vendor Name:</label> <input type="text" class="form-control" id="email" placeholder="" name="vname"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Id:</label> <input type="text" class="form-control" id="email" placeholder="" name="itemid"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="pwd">Vendor Type:</label> <select class="form-control" name="vtype" value="vtype" id="vtype"> <option value="Seller">Seller</option> <option value="Buyer">Buyer</option> </select> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Name:</label> <input type="text" class="form-control" id="email" placeholder="" name="itemname"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="pwd">Vendor Store Name:</label> <input type="text" class="form-control" id="pwd" placeholder="" name="vstore"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Category:</label> <select id="category" class="form-control" name="itemCategory" value="itemCategory"> <option value="Oil">Oil</option> <option value="Pulses">Pulses</option> <option value="Soap">Soap</option> <option value="Hair Oil">Hair Oil</option> <option value="Suger">Suger</option> <option value="Bisckits">Bisckits</option> <option value="BodyLotion">BodyLotion</option> </select> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="email">Vendor Phone No:</label> <input type="text" class="form-control" id="email" placeholder="" name="vphone"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Price:</label> <input type="text" class="form-control" id="ip" placeholder="" name="itemprice"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="email">Vendor Email:</label> <input type="text" class="form-control" id="email" placeholder="" name="vemail"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Quantity:</label> <input type="text" class="form-control" id="iq" placeholder="" name="itemquant"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <label class="control-label col-sm-6" for="email">Vendor Address:</label> <input type="text" class="form-control" id="email" placeholder="" name="vadd"> </div> <div class="col"> <label class="control-label col-sm-6" for="email">Item Total Price:</label> <input type="text" class="form-control" id="itemtotal" placeholder="" name="itemtotal"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-secondary">Submit</button> </div> </div> <div class="col"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Button 1</button> </div> </div> <div class="col"> <div class="col-sm-offset-2 col-sm-10"> <a href="bill.jsp"><button type="submit" class="btn btn-primary">Button 2</button></a> </div> </div> <div class="col"> <div class="col-sm-offset-2 col-sm-10"> <a href="inventryhomePage.jsp"><button type="submit" class="btn btn-primary">Buttom3</button></a> </div> </div> </div> </div> </form> </div> </div> </section>

.order-form .container { color: #4c4c4c; padding: 20px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } .order-form-label { margin: 8px 0 0 0; font-size: 14px; font-weight: bold; } .order-form-input { width: 100%; padding: 8px 8px; border-width: 1px !important; border-style: solid !important; border-radius: 3px !important; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; font-style: normal; line-height: 1.2em; background-color: transparent; border-color: #cccccc; } .btn-submit:hover { background-color: #090909 !important; }