diff --git a/README.md b/README.md index 8395ab6..834d30a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,37 @@ # floating-labels Floating Labels for Bootstrap + +![Sample without text input](https://i.imgur.com/JWEUrDi.png) ![Sample with text input](https://i.imgur.com/sro4kQC.png) + +## How to use + +First Include the stylesheet in your html. +Just put the input or textarea element inside a parent (div or span) with `.form-label-group` class and add a label tag after this element. +The input and label must have the same id linked with for in label to work properly. + +#### Code samples + +```html +
+ + +
+``` + +```html +
+ + +
+``` + +```html +
+ + +
+``` + +## Dependencies + +Works perfect with Bootstrap 4 but Bootstrap isn't required. Requires a browser compatible with [:placeholder-shown](https://caniuse.com/#feat=css-placeholder-shown) CSS pseudo-element.