Float Label Pattern For Bootstrap - bootstrap-float-label.js

File Size: 3.08 KB
Views Total: 4046
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Float Label Pattern For Bootstrap - bootstrap-float-label.js

Just another jQuery plugin to implement the iOS and Material Design inspired animated Float Label Pattern for Bootstrap form fields. When you start typing, the label element will move to the top of the text field with a smooth animation based on CSS3 transitions.

How to use it:

1. Include the JavaScript bootstrap-float-label.js and Stylesheet bootstrap-float-label.css in the Bootstrap page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-float-label.css">
<script src="/path/to/jquery.min.js"></script>
<script src="bootstrap-float-label.js"></script>

2. Add the CSS class float-label to the form groups as follows.

<form>
  <div class="form-group float-label">
    <label for="exampleInputUser">Username</label>
    <input type="email" class="form-control" id="exampleInputUser" >
  </div>
  <div class="form-group float-label">
    <label for="exampleInputEmail">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail" >
  </div>
  <div class="form-group float-label">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" >
  </div>
</form>

3. Initialize the plugin and you're done.

$.bootstrapFloatLabel();

4. Override the default CSS to create your own styles.

.float-label .header-label {
  position: absolute;
  pointer-events: none;
  top: -8px;
  left: 10px;
  background-color: #FFF;
  color: #000;
  padding: 0px 5px;
  font-size: 11px;
  visibility: visible;
  opacity: 1;
}

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