Floating Labels For Bootstrap 5/4 Form Controls

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

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

The Bootstrap 5 version is now available here.

See Also:

Loading Indicator For Bootstrap Form Controls - Input Spinner

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 '[email protected]/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.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.