Skip to content

tkrotoff/bootstrap-floating-label

Folders and files

NameName
Last commit message
Last commit date

Latest commit

273eac6 · Jun 3, 2023
Mar 10, 2023
Apr 10, 2021
Jan 22, 2022
May 13, 2020
Apr 10, 2022
Mar 10, 2023
Mar 10, 2023
Mar 23, 2020
Apr 10, 2022
Apr 10, 2022
Mar 10, 2023
Apr 10, 2021
Mar 10, 2023
Jun 3, 2023
Jun 3, 2023
Apr 10, 2021
Jun 3, 2023
Jun 3, 2023

Repository files navigation

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