node package manager


Bootstrap Float Label

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

Switch to Bootstrap 4



Include bootstrap-float-label.min.css:

<link rel="stylesheet" href=""/>

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=""/>
  <label for="email">Email</label>

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 class="has-float-label">
    <input class="form-control" id="last" type="text" placeholder="Surname"/>
    <label for="last">Last</label>

Browser support

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