Floating labels Basic example

Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap’s textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).

Email address
Password

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

Input with value

Form validation styles also work as expected.

Invalid input
Floating labels Textareas

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

Comments

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).

Comments
Floating labels Selects

Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they’ll always show the `<label>` in its floated state.Selects with `size` and `multiple` are not supported.

Works with selects
Floating labels Layout

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

Email address
Works with selects