Pure CSS Floating Label Pattern For Bootstrap

Category: CSS & CSS3 , Form | February 13, 2020
Author:tonystar
Views Total:5,815 views
Official Page:Go to website
Last Update:February 13, 2020
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.

Changelog:

02/13/2020

  • Support Bootstrap 4

You Might Be Interested In:


Leave a Reply