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
The Nielsen Norman Group talks about "Placeholders and Floating Labels disadvantages"
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="[email protected]">
<label for="email">Email</label>
</div>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).