Pure CSS Floating Label Pattern For Bootstrap

Author: tonystar
Views Total: 4,631 views
Official Page: Go to website
Last Update: February 13, 2020
License: MIT


Pure CSS Floating Label Pattern For Bootstrap


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>

That’s it.



See also  Facebook Inspired Skeleton Loader In Pure CSS - Placeholder Loading

Leave a Reply

Your email address will not be published. Required fields are marked *