<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="div-container">
<div class="div-heading">
<h3 class="text-center heading">Float Label With Easy JavaScript</h3>
</div>
<div class="div-content">
<a class="btn btn-square-toround btn-xl btn-bordered-primary" data-toggle="modal" data-target="#floatLabelDemo-UP"><span class="glyphicon glyphicon-chevron-up"></span> UP</a>
<a class="btn btn-square-toround btn-xl btn-bordered-success" data-toggle="modal" data-target="#floatLabelDemo-DOWN"><span class="glyphicon glyphicon-chevron-down"></span> DOWN</a>
<a class="btn btn-square-toround btn-xl btn-bordered-info" data-toggle="modal" data-target="#floatLabelDemo-LEFT"><span class="glyphicon glyphicon-chevron-left"></span> LEFT</a>
<a class="btn btn-square-toround btn-xl btn-bordered-warning" data-toggle="modal" data-target="#floatLabelDemo-RIGHT"><span class="glyphicon glyphicon-chevron-right"></span> RIGHT</a>
<div style="border:1px solid #F0AD4E;border-left:4px solid #F0AD4E; padding:10px 16px;margin-bottom:30px;;margin-top:30px;border-radius:3px 6px 6px 3px">
FOR THE DESIGNING PART<hr>
This is just based on placeholder attribute of your input element.<br>
Put the <kbd>label="..."</kbd> attribute insted of placeholder if the element does not support placeholder attribute.
</div>
<div style="border:1px solid #D9534F;border-left:4px solid #D9534F; padding:10px 16px;border-radius:3px 6px 6px 3px">
FOR THE CODING PART (in Javascript)<hr>
The Label is Shown or Hide by onfocus() & onblur() method of that element.<br>
If you work on any of that method you need to call manually in your code as below<br>
<kbd>onfocus() --> floatLabel(this)</kbd><br>
<kbd>onblur() --> hideLabel(this,lblMessae)</kbd>
</div>
</div>
</div>
<div class="modal fade" id="floatLabelDemo-UP" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate UP</h4>