Bootstrap Float Label
Pure CSS implementation of Float Label pattern for Bootstrap 3 powered by Float Label CSS-only.
Switch to Bootstrap 4
Demo
https://codepen.io/tonystar/pen/ALaZrV
Usage
Include bootstrap-float-label.min.css:
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.1/dist/bootstrap-float-label.min.css"/>
Then just add .has-float-label class to .form-group:
<span class="form-group has-float-label">
<input class="form-control" id="email" type="email" placeholder="email@example.com"/>
<label for="email">Email</label>
</span>
NOTE: label should go after input! This is the only drawback in this method.
Using inside .input-group is also supported:
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" id="first" type="text" placeholder="Name"/>
<label for="first">First</label>
</span>
<span class="has-float-label">
<input class="form-control" id="last" type="text" placeholder="Surname"/>
<label for="last">Last</label>
</span>
</div>
Browser support
ANY browser. See Float Label CSS-only docs for more details.