Label/Placeholder

index.html

<form class="form-horizontal">
  <div class="control-group">
    <input type="text" class="form-control" id="inputEmail" placeholder="" required>
    <label class="control-label" for="inputEmail">Email</label>
  </div>
  <div class="control-group">
    <input type="password" class="form-control" id="inputPassword" placeholder="" required>
    <label class="control-label" for="inputPassword">Password</label>
  </div>
  <div class="control-group">
    <button type="submit" class="btn">Sign in</button>
  </div>
</form>

main.less

//
// Variables
// ----------------------
 
@gray: #333;
@gray-light: #999;
@gray-lighter: #ccc;
@blue: #428bca;
@green: #00b232;

@space: 40px;

// Mixin for transition/transform
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// Body
// ----------------------

body{
  color: @gray;
  font-family: 'Helvetica', arial;
}

h1 {
  font-size: 40px;
  margin-bottom: @space;
  
  span {
    color: @blue;
  }
}

b {font-weight: bold;}

.wrap{
  padding: @space;
}

hr {
  clear: both;
  margin-top: @space;
  margin-bottom: @space;
  border: 0;
  border-top: 1px solid @gray-light;
}

h1{
  font-size: 30px;
  margin-bottom: @space;
}

p{
  margin-bottom: @space/2;
}

//
// Forms
// --------------------------------
.control-group {
  max-width: none;
  margin-bottom: 15px;
  position: relative;
}

// Common form controls
.form-control {
  display: block;
  height: ($space * 1.5);
  padding: ($space / 2) ($space / 2) 0;

  width: 100%;

  &:valid {
    border-color: $brand-success;
  }

  &:focus  {
    border-color: $brand-primary;
  }
}


// Float Label
// -----------------------
.control-label {
  @include transition-property(all);
  @include transition-duration(.2s);
  @include transition-timing-function(linear);

  color: $gray-light;
  position: absolute;
  top: 0;
  line-height: ($space * 1.5);
  padding: 0 ($space / 2) !important;



  cursor: text;

  .form-control:focus + &,
  .form-control:valid + & {
    color: $gray-light;
    font-size: 12px;
    line-height: 1.6em;
  }
}