<div class="container">
  <div class="row">
    <div class="col-md-6 centered">
      <form>
        <div class="form-group name-group">
          <div class="palceholder">
            <label for="name">Name</label>
            <span class="star">*</span>
          </div>
          <input type="text" class="form-control" id="name" required>
        </div>
        <div class="form-group email-group">
          <div class="palceholder">
            <label for="email">Email </label>
            <span class="star">*</span>
          </div>
          <input type="email" class="form-control" id="email" required>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

.centered{
  float: none;
  margin: 100px auto;
}

.form-group{
  position: relative;
  .palceholder{
   position: absolute;
   top: 7px;
   left: 8px;
    color: #B1B1B1;
    display: none;
  }
  label{
   font-wight: normal;
    color: #B1B1B1;
  } 
  .star{
    color: red
  }
}

/***********
Making placeholder star specifically red 
****************/


$('.palceholder').click(function() {
  $(this).siblings('input').focus();
});
$('.form-control').focus(function() {
  $(this).siblings('.palceholder').hide();
});
$('.form-control').blur(function() {
  var $this = $(this);
  if ($this.val().length == 0)
    $(this).siblings('.palceholder').show();
});
$('.form-control').blur();