Floating labels

Example

Wrap a pair of FormFloating elements in .form-floating to enable floating labels with Bootstrap's textual form fields.

A placeholder is required on each FormInput as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

Also note that the FormInput must come first so we can utilize a sibling selector (e.g., ~.

When there's a value already defined, FormLabels will automatically adjust to their floated position.

Form validation styles also work as expected.

Textareas

By default, FormTextareas will be the same height as FormInputs.

To set a custom height on your FormTextarea, do not use the rows attribute.

Instead, set an explicit height (either inline or via custom CSS).

Selects

Other than FormControl, floating labels are only available on FormSelects.

They work in the same way, but unlike FormInputs, they'll always show the FormLabel in its floated state.

Selects with size and multiple are not supported.

Layout

When working with the Bootstrap grid system, be sure to place form elements within column classes.