https://github.com/tkrotoff/bootstrap-floating-label

Bootstrap 5 Floating Label
https://github.com/tkrotoff/bootstrap-floating-label

bootstrap bootstrap5 float floating label

Last synced: 5 months ago
JSON representation

Bootstrap 5 Floating Label

• Host: GitHub
• URL: https://github.com/tkrotoff/bootstrap-floating-label
• Owner: tkrotoff
• License: mit
• Created: 2018-08-30T18:11:31.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-06-03T15:18:27.000Z (about 2 years ago)
• Last Synced: 2025-02-08T17:48:17.196Z (5 months ago)
• Topics: bootstrap, bootstrap5, float, floating, label
• Language: HTML
• Homepage:
• Size: 1.17 MB
• Stars: 33
• Watchers: 3
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @tkrotoff/bootstrap-floating-label

[![npm version](https://badge.fury.io/js/%40tkrotoff%2Fbootstrap-floating-label.svg)](https://www.npmjs.com/package/@tkrotoff/bootstrap-floating-label)

[![Node.js CI](https://github.com/tkrotoff/bootstrap-floating-label/workflows/Node.js%20CI/badge.svg?branch=master)](https://github.com/tkrotoff/bootstrap-floating-label/actions)

[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

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](src/bootstrap-floating-label.scss)

- Works with modern browsers

- Works with any font family and size

- Uses [Bootstrap variables](https://getbootstrap.com/docs/5.0/customize/sass/#variable-defaults)

⚠️ Latest implementation for Bootstrap 4 is [@tkrotoff/bootstrap-floating-label v0.8](https://github.com/tkrotoff/bootstrap-floating-label/tree/v0.8.0)

The Nielsen Norman Group talks about ["Placeholders and Floating Labels disadvantages"](https://www.nngroup.com/articles/form-design-placeholders/)

## Usage

`npm install @tkrotoff/bootstrap-floating-label`

Import [bootstrap-floating-label.scss](src/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](https://getbootstrap.com/docs/5.0/forms/overview/):

```HTML



  

  Email



```


## Limitations

There is no good way to [detect if the user entered text inside an input using CSS](https://stackoverflow.com/q/16952526).

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