floating-labels
v1.0.6
Published
floating label package build on bootstrap
Downloads
82
Readme
Floating labels CSS (only)
This Package is build over bootsrtap 3.x CSS floating labels Demo
Installation
npm install floating-labels --save
Usage
Add the floating label script in your styles as follow
@import "~floating-labels";
Examples
All You need now is:
- Make sure that the input you need to have a floating label have the
required
attr. - Add the class
group
to the input wrapper like the example below. - Add the
<span class="bar"></span>
after the input so it gives you the line effect.
<div class="form-group group">
<input id="email" type="email" class="form-control" name="email" required />
<span class="bar"></span>
<label for="email">E-Mail Address</label>
</div>
Helper Classes
1. Error styles
you need to add class has-error
along with class group
<div class="form-group group has-error">
<input id="email" type="email" class="form-control" name="email" required />
<span class="bar"></span>
<label for="email">E-Mail Address</label>
</div>
2. Warning styles
you need to add class has-warning
along with class group
<div class="form-group group has-warning">
<input id="email" type="email" class="form-control" name="email" required />
<span class="bar"></span>
<label for="email">E-Mail Address</label>
</div>
3. Success styles
you need to add class has-success
along with class group
<div class="form-group group has-success">
<input id="email" type="email" class="form-control" name="email" required />
<span class="bar"></span>
<label for="email">E-Mail Address</label>
</div>
4. Info styles
you need to add class has-info
along with class group
<div class="form-group group has-info">
<input id="email" type="email" class="form-control" name="email" required />
<span class="bar"></span>
<label for="email">E-Mail Address</label>
</div>