Create Bootstrap 4 Form Controls With Floating Labels


Author: PlanetThemes
Views Total: 14,903 views
Official Page: Go to website
Last Update: March 18, 2020
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>

Changelog:

v0.5.1 (03/18/2020)

See also  Insert Pretty Awesome Buttons Into Your Webpage Using Pure CSS - bttn.css

Leave a Reply

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