Floating labels CSS (only)

This Package is build over bootsrtap 3.x CSS floating labels Demo

Installation

1npm install floating-labels --save

Usage

Add the floating label script in your styles as follow

1@import "~floating-labels";

Examples

All You need now is:

1. Make sure that the input you need to have a floating label have the required attr.
2. Add the class group to the input wrapper like the example below.
3. Add the <span class="bar"></span> after the input so it gives you the line effect.

1<div class="form-group group">
2    <input id="email" type="email" class="form-control" name="email" required />
3    <span class="bar"></span>
4    <label for="email">E-Mail Address</label>
5</div>

Helper Classes

1. Error styles

you need to add class has-error along with class group

1<div class="form-group group has-error">
2    <input id="email" type="email" class="form-control" name="email" required />
3    <span class="bar"></span>
4    <label for="email">E-Mail Address</label>
5</div>

2. Warning styles

you need to add class has-warning along with class group

1<div class="form-group group has-warning">
2    <input id="email" type="email" class="form-control" name="email" required />
3    <span class="bar"></span>
4    <label for="email">E-Mail Address</label>
5</div>

3. Success styles

you need to add class has-success along with class group

1<div class="form-group group has-success">
2    <input id="email" type="email" class="form-control" name="email" required />
3    <span class="bar"></span>
4    <label for="email">E-Mail Address</label>
5</div>

4. Info styles

you need to add class has-info along with class group

1<div class="form-group group has-info">
2    <input id="email" type="email" class="form-control" name="email" required />
3    <span class="bar"></span>
4    <label for="email">E-Mail Address</label>
5</div>