Press "Enter" to skip to content

Bootstrap 5 Floating Label Form Controls Library

A bootstrap floating label is a CSS / SCSS library that adds floating labels to Bootstrap 5 or Bootstrap 4 form controls such as input, text area, and selection.

bootstrap 4 floating labels placeholder shown, bootstrap 4 floating label examples, bootstrap 5 floating labels, bootstrap 3 floating labels, floating label bootstrap, floating label css download

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

Official Website(tkrotoff): Click Here

This superior jQuery/javascript plugin is developed by tkrotoff. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.