Skip to docs navigation

Floating labels

Example

When there’s a value already defined, <label>s will automatically adjust to their floated position.

Form validation styles also work as expected.

Textareas

By default, <textarea>s with .form-control will be the same height as <input>s.

To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

Selects

Floating labels are also available on .form-selects. Unlike <input>s, they’ll always show the <label> in its floated state.

Layout