Bootstrap 5 Floating Label Form Controls Library

How to make use of it:

1. Install the package with NPM.

# NPM
$ npm i @tkrotoff/bootstrap-floating-label

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

@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 outline the textual content to be displayed within 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.

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

Floating Labels For Bootstrap 5/4 Form Controls, bootstrap floating label Plugin/Github

See Demo And Download