Floating Labels With Animation For Bootstrap

Yet another floating label pattern solution that makes label element floating on the top of its associated form control when focused.

Designed for Bootstrap framework and built with pure CSS. Not only text boxes (input & textarea), the plugin also works with the native select element. 

Compatible with all modern web browsers that support the :placeholder-shown CSS pseudo-element.

How to use it:

1. Load the stylesheet floating-labels.css in your Bootstrap project.

<!-- Bootstrap Files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!--floating-labels.css -->
<link rel="stylesheet" href="floating-labels.css" />

2. Insert the floating label together with your form control into a container with the CSS class of 'form-label-group' and you're done.

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

<!-- Textarea -->
<div class="form-label-group">
  <textarea id="ex2" placeholder="Floating Label area"></textarea>
  <label for="ex2">Floating Label</label>
</div>

<!-- Select Box -->
<div class="form-label-group">
  <select id="ex3">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="ex3" >Floating Label</label>
</div>

3. Use the CSS class 'in-border' or 'outline' class to make the label element floating in the top border just like Material Design's form controls.

<div class="form-label-group in-border">
  <input type="text" id="ex1" placeholder="Floating Label" />
  <label for="ex1">Floating Label</label>
</div>

<div class="form-label-group outline">
  <input type="text" id="ex1" placeholder="Floating Label" />
  <label for="ex1">Floating Label</label>
</div>

4. This example shows how to integrate the floating label into 3rd jQuery plugins like intl-tel-input.

$('.intl-tel-input ~ label').insertAfter('.intl-tel-input input.form-control')
// or
$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
  let label = $(element).parent().find('~ label');
  $(element).after(label);
});

---

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