<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 paddingTB40 "> <div class="col-md-3 "> <h6>Sidebar goes here</h6> </div> <div class="col-md-9 bg-brown"> <form class="form-horizontal marginT20"> <fieldset> <!-- Form Name --> <legend>Add Listing</legend> <!-- Name of business input--> <div class="form-group"> <div class="col-md-12"> <input id="name" name="name" placeholder="Name of your Service" class="form-control" required="" type="text"> </div> </div> <!-- Description --> <div class="form-group"> <div class="col-md-12"> <textarea class="form-control" id="about" name="about">Write about your business</textarea> </div> </div> <!-- Contact Info--> <div class="form-group"> <div class="col-md-6"> <input id="" name="" placeholder="Business Phone No." class="form-control" required="" type="text"> </div> <div class="col-md-6"> <input id="" name="" placeholder="Email" class="form-control" required="" type="text"> </div> </div> <!-- Address input--> <div class="form-group"> <div class="col-md-6"> <input id="" name="" placeholder="Street Address" class="form-control" required="" type="text"> </div> <div class="col-md-6"> <input id="address2" name="address2" placeholder="Street Address2 (Optional)" class="form-control" type="text"> </div> <div class="col-md-6"> <input id="State" name="State" placeholder="State" class="form-control" required="" type="text"> </div> <div class="col-md-6"> <input id="City" name="City" placeholder="City" class="form-control" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <div class="col-md-6"> <input id="pincode" name="pincode" placeholder="Pincode" class="form-control" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <div class="col-md-6"> <input id="contactperson" name="contactperson" placeholder="Contact Person Name" class="form-control" required="" type="text"> </div> <div class="col-md-6"> <input id="" name="" placeholder="Contact Person Phone No." class="form-control" required="" type="text"> </div> </div> <!-- File Button --> <div class="form-group"> <div class="col-md-12"> <div class="upload-box"> <div class="hold"><a href="#">Maximum file size 20 MB</a> <span class="btn-file"> Upload Photos <input type="file"> </span> </div> </div> </div> </div> <!-- Button --> <div class="form-group"> <div class="col-md-4"> <button id="listing-button" name="listing-button" class="btn btn-warning">Add my Business</button> </div> </div> </fieldset> </form> </div> </div>

.bg-brown { background-color: #eaeaea; box-shadow: 2px 2px 2px #888888; } .paddingTB20 { padding-top : 20px; padding-bottom:20px; } .marginT20 { margin-top : 20px; } textarea.form-control { background-color: #fff; color:#b2b1b0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: 1px solid #e9e6e0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } input.form-control { height: 38px; background-color: #fff; color:#000; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: 1px solid #e9e6e0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } form-control::-webkit-input-placeholder { color: black; } .form-control:-moz-placeholder { color: black; } .form-control::-moz-placeholder { color: black; } .form-control:-ms-input-placeholder { color: black; } .form-control:focus{border-color: #f2a446; box-shadow: none; -webkit-box-shadow: none;} /* upload button css */ .upload-box .btn-file { background-color: #adaba9; } .upload-box .btn-file:hover { background-color: #686563; } .upload-box .hold { float: left; width: 100%; position: relative; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } .upload-box .hold a { font: 400 14px/36px 'Roboto',sans-serif; color: #666; text-decoration: none; } .upload-box .btn-file { position: relative; overflow: hidden; float: left; padding: 12px 9px; font: 300 14px/14px 'Roboto',sans-serif; color: #fff; margin: 0 10px 0 0; text-transform: uppercase; border-radius: 3px; cursor: pointer; } .upload-box .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; opacity: 0; outline: none; background: #fd0707; cursor: inherit; display: block; }