Pure CSS Floating Label Pattern For Bootstrap

Category: CSS & CSS3 , Form | February 13, 2020
Author: tonystar
Views Total: 3,647 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.



  • Support Bootstrap 4

You Might Be Interested In:

Leave a Reply