<div class="container my-5">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="form-group">
        <input type="text" id="name" class="form-control" required>
        <label class="form-control-placeholder" for="name">Name</label>
      </div>
      <div class="form-group">
        <input type="password" id="password" class="form-control" required>
        <label class="form-control-placeholder" for="password">Password</label>
      </div>
    </div>
  </div>
</div>

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}