Skip to content

Latest commit

 

History

History
48 lines (31 loc) · 2.15 KB

README.md

File metadata and controls

48 lines (31 loc) · 2.15 KB
Raw

@tkrotoff/bootstrap-floating-label

npm version Node.js CI Prettier Airbnb Code Style

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).