Floating Labels For Bootstrap 5/4 Form Controls

File Size: 97.1 KB
Views Total: 11499
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Floating Labels For Bootstrap 5/4 Form Controls

This is a CSS/SCSS library that adds floating labels to Bootstrap 5 or Bootstrap 4 form controls like input, textarea, and select.

See Also:

How to use it:

1. Install the package with NPM.

$ npm i @tkrotoff/bootstrap-floating-label

2. Import the Bootstrap Floating Label into your Bootstrap project.

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

3. Add your form controls to DIV containers with the CSS class of 'floating-label' and define the text to be displayed in the floating labels.

<!-- Input Field -->
<div class="form-group floating-label">
  <input id="text" class="form-control" placeholder=" " />
  <label for="text">Floating Label Text</label>

<!-- Textarea -->
<div class="form-group floating-label">
  <textarea id="textarea" class="form-control" placeholder=" "></textarea>
  <label for="textarea">Floating Label Text</label>

<!-- Select -->
<div class="form-group floating-label">
  <select class="form-control" id="select">
  <label for="select">select</label>

4. Determine the size of the floating labels.

  • label-lg: Large
  • label-md: Medium
  • label-sm: Small
<div class="form-group floating-label">
  <input id="input-label-lg" class="form-control form-control-lg" placeholder=" " />
  <label for="input-label-lg" class="label-lg">label-lg</label>

<div class="form-group floating-label">
  <input id="input-label-md" class="form-control" placeholder=" " />
  <label for="input-label-md" class="label-md">label-md</label>

<div class="form-group floating-label">
  <input id="input-label-sm" class="form-control form-control-sm" placeholder=" " />
  <label for="input-label-sm">label-sm</label>


v0.12.2 (2023-03-11)

  • Fix z-index with Bootstrap >= 5.2.1
  • Fix "Error: Undefined operation "var(--bs-border-width) * 2"" with Bootstrap 5.3

v0.11.4 (2022-04-11)

  • Update npm packages, switch to Parcel 2
  • Examples with validation

v0.11.3 (2021-11-27)

  • Fix "Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0"
  • Update npm packages

v0.11.2 (2021-05-09)

  • Updated for Bootstrap 5.0.0 stable.

v0.11.1 (2021-05-08)

  • Fix label line-height

v0.11.0 (2021-04-30)

  • Remove label's disabled background-color: doesn't play nice with transition
  • Smaller line-height for the label

This awesome jQuery plugin is developed by tkrotoff. For more Advanced Usages, please check the demo page or visit the official website.