Material Inspired Floating Labels For Bootstrap 4 - floating-labels

File Size: 32 KB
Views Total: 5593
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Material Inspired Floating Labels For Bootstrap 4 - floating-labels

floating-labels is a jQuery plugin used to create Material Design inspired text fields with animated floating labels for Bootstrap 4 framework.

How to use it:

1. To get started, include jQuery library and Bootstrap 4 framework on the page.

<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. Include the jQuery floating-labels plugin's JavaScript and CSS files.

<link rel="stylesheet" href="floating.labels.css">
<script src="floating.labels.js"></script>

3. Add the CSS class 'floating-control-group' to the form fields as follows:

  <div class="form-group floating-control-group">
    <label for="txtFloatingUsername">Username</label>
    <input type="email" class="form-control" id="txtFloatingUsername" placeholder="Enter Username">
  <div class="form-group floating-control-group">
    <label for="txtFloatingPassword">Password</label>
    <input type="password" class="form-control" id="txtFloatingPassword" placeholder="Enter Password">
  <div class="form-group floating-control-group">
    <label for="txtFloatingComments">Comments</label>
    <textarea class="form-control" id="txtFloatingComments" rows="3"></textarea>

4. Call the function on the form group and done.




5. Default CSS selectors.

  floatingLabelClass: 'floating-label',
  floatingLabelOnClass: 'floating-label-on',
  floatingInputClass: 'floating-input'

6. Add Bootstrap styles to the input.

  floatingStyle: 'primary'



  • Fix label position on initialization if input has text


  • Adding bootstrap styles and support for lg and sm inputs


  • Adding important on css to avoid overwriting from original bootstrap


  • Remove support of the animation, adding transform option to move up the label through css

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