<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 id="hero-home" class="container-fluid"> <div class="container"> <div class="col-sm-4 hero-form"> <h2>Form Title</h2> <form> <div class="form-group"> <label class="sr-only" for="firstName">First Name</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-name.svg"> </div> <div class=""> <input type="text" class="form-control" id="firstName" placeholder="First Name"> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="lastName">Last Name</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-name.svg"> </div> <div class=""> <input type="text" class="form-control" id="lastName" placeholder="Last Name"> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="eMail">Email</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-email.svg"> </div> <div class=""> <input type="text" class="form-control" id="eMail" placeholder="Email"> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="phone">Phone</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-phone.svg"> </div> <div class=""> <input type="text" class="form-control" id="phone" placeholder="Phone"> </div> </div> </div> <!-- <div class="form-group"> <label class="sr-only" for="city">City</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-address.svg"> </div> <div class=""> <input type="text" class="form-control" id="city" placeholder="City"> </div> </div> </div> --> <!--<div class="form-group">--> <!-- <label class="sr-only" for="zipCode">Zip Code</label>--> <!-- <div class="input-group">--> <!-- <div class="input-group-addon">--> <!-- <img src="assets/media/images/icon-form-address.svg">--> <!-- </div>--> <!-- <div class="">--> <!-- <input type="text" class="form-control" id="zipCode" placeholder="Zip">--> <!-- </div>--> <!-- </div>--> <!--</div>--> <div class="form-inline"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-address.svg"> </div> <div class="col-sm-12 no-padding"> <div class="col-sm-6 no-padding"> <label class="sr-only" for="province">City</label> <select class="form-control input-location" id="province" placeholder="City"> <option selected="selected" disabled="disabled">City</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland and Labrador</option> <option value="NS">Nova Scotia</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <optgroup label="Territories"> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut</option> <option value="YT">Yukon</option> </optgroup> <optgroup label="Other"> <option value="US">USA</option> </optgroup> </select> </div> <div class="col-sm-6 zip"> <label class="sr-only" for="province">Zip</label> <input type="text" class="form-control input-location" id="zip" placeholder="Zip"> </div> </div> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="referral">Who referred you?</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-ref.svg"> </div> <div class=""> <input type="text" class="form-control" id="referral" placeholder="Who referred you?"> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="CaseDetails">Case Details</label> <div class="input-group"> <div class="input-group-addon"> <img src="assets/media/images/icon-form-case.svg"> </div> <div class=""> <textarea class="form-control" id="CaseDetails" placeholder="Case Details" rows="6"></textarea> </div> </div> </div> <button type="submit" class="btn btn-primary">Get Help Today!</button> </form> </div> </div> </div>

.hero-form { background-color: #eee; padding: 20px; margin-top: 30px; } .hero-form h2 { margin-top: 0; text-align: center; } .hero-form .form-group { margin-bottom: 10px; } .hero-form input[type="text"] { box-sizing: border-box; } .hero-form .input-group-addon img { width: 20px; } .hero-form .form-control { height: 38px; background-color: #fff; border: none; border-radius: 0; } .hero-form .input-group-addon { border: none; border-radius: 0; background-color: #999; } .form-group .input-group .input-padding { padding-right: 0px; } .input-location { max-width: 100%; border: 0; } .zip { padding: 0 0 0 10px; } .zip .form-control { border-radius: 0; } .hero-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } .no-padding { padding: 0; }