<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form> <div class="input-group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="input-group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> </form></div></div>

@import url(http://fonts.googleapis.com/css?family=Roboto); * { font-family: 'Roboto' , sans-serif; } /* form starting stylings ------------------------------- */ .input-group { position:relative; margin-bottom:45px; } input { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #00BFFF; } input:focus { outline:none; } /* LABEL ======================================= */ label { color:#999; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:10px; transition:0.2s ease all; } /* active state */ input:focus ~ label, input:valid ~ label { top:-20px; font-size:14px; color:#000; } /* BOTTOM BARS ================================= */ .bar { position:relative; display:block; width:300px; } .bar:before, .bar:after { content:''; height:2px; width:0; bottom:.5px; position:absolute; background:#00BFFF; transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; }