<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="row"> <form> <div class="col-md-6"> <div class="row"> <div class="form-group col-md-6"> <label for="exampleInputUsername">Employee Code</label> <input type="text" class="form-control" id="" placeholder=" Enter Employee Code"> </div> <div class="form-group col-md-6"> <label for="exampleInputEmail">Employee Name</label> <input type="text" class="form-control" id="exampleInputEmail" placeholder=" Enter Employee Name"> </div> <div class="form-group col-md-6"> <label for="telephone">Father/Husband Name</label> <input type="text" class="form-control" id="" placeholder=" Enter Father/Husband Name no."> </div> <div class="form-group col-md-6"> <label for="telephone">Adhaar No</label> <input type="text" class="form-control" id="" placeholder=" Enter Adhaar No"> </div> </div> <div class="form-group"> <label for="telephone">Zone Grouping</label> <select class="form-control"> <option>--Zone Grouping--</option> <option>--Zone Grouping--</option> <option>--Zone Grouping--</option> </select> </div> <div class="form-group"> <label for="telephone">Present Address</label> <textarea class="form-control" id="description" placeholder="Present Address"></textarea> </div> <div class="form-group"> <label for="telephone">Permanent Address</label> <textarea class="form-control" id="description" placeholder="Permanent Address"></textarea> </div> <div class="row"> <div class="form-group col-md-6"> <label for="telephone">Telephone</label> <input type="text" class="form-control" id="" placeholder=" Enter Telephone no."> </div> <div class="form-group col-md-6"> <label for="telephone">Mobile Number</label> <input type="text" class="form-control" id="" placeholder=" Enter Mobile no."> </div> <div class="form-group col-md-6"> <label for="telephone">Designation</label> <select class="form-control"> <option>--Select Designation--</option> <option>--Select Designation--</option> <option>--Select Designation--</option> </select> </div> <div class="form-group col-md-6"> <label for="telephone">PF Number</label> <input type="text" class="form-control" id="" placeholder=" Enter PF Number"> </div> <div class="form-group col-md-6"> <label for="telephone">ESI Number</label> <input type="text" class="form-control" id="" placeholder=" Enter ESI Number"> </div> <div class="form-group col-md-6"> <label for="telephone">Gender</label> <select class="form-control"> <option>--Select Gender--</option> <option>Male</option> <option>Female</option> </select> </div> <div class="form-group col-md-6"> <label for="telephone">DOJ</label> <input type="date" class="form-control" id="" placeholder=" Enter DOJ"> </div> <div class="form-group col-md-6"> <label for="telephone">DOB</label> <input type="date" class="form-control" id="" placeholder=" Enter DOB"> </div> <div class="form-group col-md-6"> <label for="telephone">Left Job, Date</label> <input type="date" class="form-control" id="" placeholder=" Enter Left Job, Date"> </div> <div class="form-group col-md-6"> <label for="telephone">Dispensery</label> <input type="text" class="form-control" id="" placeholder=" Enter Dispensery Name"> </div> <div class="form-group col-md-6"> <label for="telephone">PF Marks</label> <input type="text" class="form-control" id="" placeholder=" Enter PF Marks"> </div> <div class="form-group col-md-6"> <label for="telephone">Bank A/C No Refrence No.</label> <input type="text" class="form-control" id="" placeholder=" Enter Bank A/C No Refrence No"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="telephone">Calculation Mode</label> <select class="form-control"> <option>--select Calculation Mode--</option> <option>--Zone Grouping--</option> <option>--Zone Grouping--</option> </select> </div> <div class="form-group"> <label for="telephone">Normal Duty Calculation Days Or Hours</label> <input type="text" class="form-control" id="" placeholder=" 0=Default"> </div> <div class="form-group"> <label for="telephone">Over Time Duty Calculation Days Or Hours</label> <input type="text" class="form-control" id="" placeholder=" 0=Default"> </div> <div class="result-wrapper"> <div class="row"> <div class="form-group col-md-6"> <label for="telephone">Basic+DA</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">HRA</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">Conveyance</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">Washing Allowance</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6 col-md-6"> <label for="telephone">Other Allowance</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">Gross Pay</label> <input type="text" class="form-control" id="" placeholder="0.00"> </div> <div class="form-group col-md-6 col-md-6 col-md-6"> <label for="telephone">PF WAGE</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6 col-md-6"> <label for="telephone">PF %</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">ESI WAGE</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6"> <label for="telephone">ESI %</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6 col-md-6"> <label for="telephone">PT Applicable</label> <input type="text" class="form-control" id="" placeholder="1=YES"> </div> <div class="form-group col-md-6"> <label for="telephone">PT STATE</label> <select class="form-control"> <option>--select PT STATE Mode--</option> <option>--PT STATE--</option> <option>--PT STATE--</option> </select> </div> <div class="form-group col-md-6"> <label for="telephone">OT RATE</label> <input type="text" class="form-control" id="" placeholder=""> </div> <div class="form-group col-md-6 col-md-6"> <label for="telephone">L.W.F AMT </label> <input type="text" class="form-control" id="" placeholder=""> </div> </div> <button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button> </div> </div> </form> </div> </div>

.result-wrapper { background:#ccc; padding:30px; }