Pure CSS Floating Label Pattern For Bootstrap

Preview:

Description:

A CSS extension for Bootstrap 3/4 that provide the Matt D Smith’s Floating Label Pattern on the input placeholders for better form interaction.

How to use it:

Add the style sheet bootstrap-float-label.css to your Bootstrap project:

<link rel="stylesheet" href="dist/bootstrap-float-label.css"/>

Wrap your text fields into an element with the CSS class of ‘has-float-label’.

<span class="has-float-label">
  <input class="form-control" id="first" type="text" placeholder="Name"/>
  <label for="first">First Name</label>
</span>

That’s it.

Changelog:

02/13/2020

• Support Bootstrap 4