Create Bootstrap 4 Form Controls With Floating Labels

Category: CSS & CSS3 , Form | July 13, 2018
Author: PlanetThemes
Views Total: 564
Official Page: Go to website
Last Update: July 13, 2018
License: MIT

Preview:

Create Bootstrap 4 Form Controls With Floating Labels

Description:

A CSS extension that lets you create Bootstrap 4 form controls with floating labels via the :placeholder-shown pseudo-element.

Without the need of any JavaScript. Works in latest Chrome, Safari, and Firefox.

How to use it:

Download and insert the stylesheet floating-labels.css after the latest Bootstrap 4 stylesheet.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="floating-labels.css" rel="stylesheet">

Create the form controls as follows.

<div class="form-label-group">
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
  <label for="inputEmail">Email address</label>
</div>

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>

Leave a Reply