How to create material design input form using css and bootstrap

Question

I want to design the following material design input form using CSS and bootstrap. The following code is what I am currently using. But it doesn't provide the exact result I want.

HTML CODE :

<div class="container">

  <h2>Google Material Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>

  <p class="footer">
    a <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
  </p>

</div>

But I want something like this design :

Answer 1

Try with this code.

HTML:

  <div class="main_div">
  <div class="group">
      <input type="text" required="required"/>
      <label>Name</label>
    </div>
</div>

CSS:

.main_div{
    padding: 30px;
}
input,
textarea {
    background: none;
    color: #c6c6c6;
    font-size: 18px;
    padding: 10px 10px 10px 15px;
    display: block;
    width: 320px;
    border: none;
    border-radius: 10px;
    border: 1px solid #c6c6c6;
}
input:hover{
    border: 3px solid black;
}
input:focus,
textarea:focus {
    outline: none;
    border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
    top: -5px;
    font-size: 12px;
    color: #000;
    left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
    width: 320px;
}

input[type="password"] {
    letter-spacing: 0.3em;
}
.group{
    position: relative;
}
label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 12px;
    transition: 300ms ease all;
    background-color: #fff;
    padding: 0 2px;
}