Floating Labels

I've always loved floating labels on top of input fields, but they're not really accessible. Bootstrap provides them with a few caveats.

Floating Labels

form-floating

Try it

To create them, you need to have a placeholder on each input and whereas normally add labels before the inputs. With floating labels the inputs must come first. The label doesn't need a form-label class.

Check out the cool animation when you fill it out.