floating-labels

Username

Password

Comments

Submit

To transform a normal bootstrap form-group container to floating labels add the class floating-control-group on the div container

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

If you want to use it manually then select the div container using jQuery and call the floatingLabel constructor

$('.form-group').floatingLabel();

You can customize the class that will be used for the floating labels by using either the below data attributes on the div containers

• data-floating-label-class: Default class that will be used on the label
• data-floating-label-on-class: Default class that will be used on the label when is floated
• data-floating-input-class: Default class that will be used on the input field
• data-floating-style: Default style class that will be used for coloring

<div class="form-group floating-control-group" data-floating-label-class="alternative-class">
    <label for="txtFloatingUsername">Username</label>
    <input type="email" class="form-control" id="txtFloatingUsername" placeholder="Enter Username">
</div>
<div class="form-group floating-control-group" data-floating-label-on-class="alternative-floated-class">
    <label for="txtFloatingPassword">Password</label>
    <input type="password" class="form-control" id="txtFloatingPassword" placeholder="Enter Password">
</div>
<div class="form-group floating-control-group" data-floating-input-class="alternative-input-class">
    <label for="txtFloatingComments">Comments</label>
    <textarea class="form-control" id="txtFloatingComments" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
                                            

or by adding options on the js constructor

var options = {
    floatingLabelClass: 'alternative-floating-label',
    floatingLabelOnClass: 'alternative-floating-label-on',
    floatingInputClass: 'alternative-floating-input',
    floatingStyle: 'primary'
};
$('.form-group').floatingLabel(options);