Pure CSS Floating Label Pattern For Bootstrap

Category: CSS & CSS3 , Form | October 13, 2016
Author: tonystar
Views Total: 4,077
Official Page: Go to website
Last Update: October 13, 2016
License: MIT

Preview:

Pure CSS Floating Label Pattern For Bootstrap

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.

Leave a Reply