Floating labels are an alternative to Boostrap's floating labels. NS-Lib's floating labels save vertical space compared to Boostrap's floating labels and their style is based off Material Design standards. Check out the comparison:
To use floating labels, create a wrapper div with class floating-labels. Place a text input and a label inside the wrapper div. The text input will need to have the class form-control and it must have a placeholder set. Floating labels use the :placeholder-shown CSS property to detect if text is inside a textbox, which requires a placeholder value to be specified, even if it is empty.
Important: The <label> element must be placed after the <input> element.
<div class="floating-labels">
<input type="text" class="form-control" placeholder="" />
<label>First Name</label>
</div><div class="floating-labels">
<textarea class="form-control" placeholder=""></textarea>
<label>Message</label>
</div>You can scale a floating label box by changing the font size of the floating-labels div.
<div class="floating-labels" style="font-size: 25px">
<input type="text" class="form-control" placeholder="" />
<label>First Name</label>
</div><div class="floating-labels" style="font-size: 10px">
<input type="text" class="form-control" placeholder="" />
<label>First Name</label>
</div>