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 protected]"/>
  <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.