Bootstrap Float Label

Now part of Bootstrap Kit!

Pure CSS implementation of Float Label pattern for Bootstrap 4 powered by Pure-CSS Float Label.

Switch to Bootstrap 3

Note!

As of v4.0.2 files from dist folder are moved to project root! Be careful and update your paths!

Demo

https://codepen.io/tonystar/pen/LRdpYZ

Usage

Include bootstrap-float-label.min.css:

<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.2/bootstrap-float-label.min.css"/>

Then just add .has-float-label class to .form-group ^v4.0.1+:

<label class="form-group has-float-label">
  <input class="form-control" type="email" placeholder="email@example.com"/>
  <span>Email</span>
</label>

NOTE: <input> should be inside <label> and <span> should go after <input>. Why?

Using inside .input-group is also supported:

<div class="form-group input-group">
  <label class="has-float-label">
    <input class="form-control" type="text" placeholder="Name"/>
    <span>First</span>
  </label>
  <label class="has-float-label">
    <input class="form-control" type="text" placeholder="Surname"/>
    <span>Last</span>
  </label>
</div>

Browser support

ANY browser. See Pure-CSS Float Label docs for more details.