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:

• Loading Indicator For Bootstrap Form Controls - Input Spinner
• 10 Best Floating Label Solutions For Better Form UX

How to use it:

1. Install the package with NPM.

# 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>
</div>

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

<!-- Select -->
<div class="form-group floating-label">
  <select class="form-control" id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <label for="select">select</label>
</div>

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>

<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>

<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>
</div>

Changelog:

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.