Bootstrap Form Style

Very nice Bootstrap registration form.

HTML:

<div class="form-bg">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-3 col-md-6"><form class="form-horizontal">
          <div class="header">Registration</div>
          <div class="form-content">
            <h4 class="heading">Your Details</h4>
            <div class="form-group">
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label>
              <input id="exampleInputName2" class="form-control" type="text" placeholder="Username" /></div>
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-envelope-o"></i></label>
              <input id="exampleInputName2" class="form-control" type="email" placeholder="Email" /></div>
            </div>
            <div class="form-group">
              <div class="col-sm-12"><label class="control-label" for="exampleInputName2"><i class="fa fa-lock"></i></label>
              <input id="exampleInputName2" class="form-control" type="text" placeholder="Phone" /></div>
            </div>
            <h4 class="heading">Registration Details</h4>
            <div class="form-group">
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label>
              <input id="exampleInputName2" class="form-control" type="number" placeholder="Adults" /></div>
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label>
              <input id="exampleInputName2" class="form-control" type="number" placeholder="Children" /></div>
            </div>
            <div class="form-group">
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label>
              <input id="exampleInputName2" class="form-control" type="text" placeholder="Check-in date (dd/mm/yy)" /></div>
              <div class="col-sm-6"><label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label>
              <input id="exampleInputName2" class="form-control" type="text" placeholder="Check-out date (dd/mm/yy)" /></div>
            </div>
            <div class="form-group">
              <div class="col-sm-12"><label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label>
              <textarea class="form-control" placeholder="Additional Message"></textarea></div>
            </div>
            <div class="clearfix"><button class="btn btn-default" type="submit"> Register</button></div>
          </div>
        </form></div>
      </div>
    </div>
  </div>

CSS:

.form-bg{background: #e4e6e6;}
form{font-family: 'Roboto', sans-serif;}
.form-horizontal .header{background: #3f9cb5;padding: 30px 25px;font-size: 30px;color: #fff;text-align: center;text-transform: uppercase;border-radius: 3px 3px 0 0;}
.form-horizontal .heading{font-size: 16px;color: #3f9cb5;margin: 10px 0 20px 0;text-transform: capitalize;}
.form-horizontal .form-content{padding: 25px;background: #fff;}
.form-horizontal .form-control{padding: 12px 16px 12px 39px;height: 50px;font-size: 14px;color: #2b2a2a;border: none;border-bottom: 2px solid #ccc;border-radius: 0;box-shadow: none;margin-bottom: 15px;}
.form-horizontal .form-control:focus{border-color: #3f9cb5;box-shadow: none;}
.form-horizontal .control-label{font-size: 17px;color: #ccc;position: absolute;top: 5px;left: 27px;text-align: center;}
.form-horizontal textarea.form-control{resize: vertical;height: 130px;}
.form-horizontal .btn{font-size: 18px;color: #4e4e4e;float: right;margin: 10px 0;border: 2px solid #ccc;border-radius: 0;padding: 10px 25px;transition: all 0.5s ease 0s;}
.form-horizontal .btn:hover{background: #fff;border-color: #3f9cb5;}

DEMO