@tkrotoff/bootstrap-floating-label

@tkrotoff/bootstrap-floating-label">

Floating label for Bootstrap 5

demo

Example: https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io

Small: less than 200 lines of SCSS
Works with modern browsers
Works with any font family and size
Uses Bootstrap variables

⚠️ Latest implementation for Bootstrap 4 is @tkrotoff/bootstrap-floating-label v0.8

The Nielsen Norman Group talks about “Placeholders and Floating Labels disadvantages”

Usage

npm install @tkrotoff/bootstrap-floating-label

Import bootstrap-floating-label.scss after bootstrap.scss:

@import '~bootstrap/scss/bootstrap';
@import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label';

Place <label> under <input> inside your Bootstrap code:

<div class="floating-label">
  <input type="email" id="email" class="form-control" placeholder="name@example.com">
  <label for="email">Email</label>
</div>

Limitations

There is no good way to detect if the user entered text inside an input using CSS.

Thus a placeholder is required <input placeholder=" "> otherwise the label will be above the input instead of inside (see https://codepen.io/tkrotoff/pen/KjgyZj).