@tkrotoff/bootstrap-floating-label


Floating label for Bootstrap 5

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:

``SCSS
@import '~bootstrap/scss/bootstrap';

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

Place under inside your Bootstrap code:

`HTML



`

Limitations

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

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