Bootstrap/site/content/docs/5.1/forms/floating-labels.md

layout	title	description	group	toc
docs	Floating labels	Create beautifully simple form labels that float over your input fields.	forms	true

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

{{< example >}}

Email address

Password

{{< /example >}}

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

{{< example >}}

Input with value {{< /example >}}

Form validation styles also work as expected.

{{< example >}}

Invalid input {{< /example >}}

Textareas

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

{{< example >}}

Comments

{{< /example >}}

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

{{< example >}}

Comments

{{< /example >}}

Selects

Other than .form-control, floating labels are only available on .form-selects. 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.

{{< example >}}

Open this select menu One Two Three Works with selects

{{< /example >}}

Readonly plaintext

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.

{{< example >}}

Empty input

Input with value

{{< /example >}}

Always floating

Make any .form-control always use a floating label with visible placeholder with the .form-floating-always modifier class. Visible placeholders use the default input color and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.

{{< example >}}

Email address

Password

{{< /example >}}

Layout

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

{{< example >}}

Email address

Open this select menu One Two Three Works with selects

{{< /example >}}

Sass

Variables

{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}