<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"> <div class="col-md-3"> <div class="pad15"><br> <div class="md-input"> <input class="md-form-control" required="" type="text"> <span class="highlight"></span> <span class="bar"></span> <label>User Name</label> </div> <div class="md-input"> <input class="md-form-control" required="" type="text"> <span class="highlight"></span> <span class="bar"></span> <label>Password</label> </div> </div> </div> </div>

.md-input { position: relative; margin-bottom: 30px; } .md-input .md-form-control { font-size: 16px; padding: 10px 10px 10px 5px; display: block; border: none; border-bottom: 2px solid #CACACA; box-shadow: none; width: 100%; } .md-input label { color: rgba(0, 0, 0, 0.5); font-size: 16px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .md-input .bar:before { left: 50%; } .md-input .bar:after { right: 50%; } .md-input .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } .md-input .md-form-control:focus ~ label, .md-input .md-form-control:valid ~ label { top: -15px; font-size: 14px; color: #183D5D; } .md-input .bar:before, .md-input .bar:after { content: ''; height: 2px; width: 0; bottom: 0px; position: absolute; background: #03A9F4; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .md-input .md-form-control:focus ~ .bar:before, .md-input .md-form-control:focus ~ .bar:after { width: 50%; }