Bootstrap 5 Floating Labels

The "form-floating" works to enable floating labels with text form fields in the Bootstrap 5 version. A bootstrap 5 floating label is a text label that shows at full font size within an input field. The label "floats" above the input field when interacting, allowing the user to enter a value.

A bootstrap 5 Floating labels indicate the required kind of input for a field. Except for full-width text fields, which employ the input's placeholder attribute, every Text Field and Select should have a label. Labels are always visible and aligned with the input line. They can be floating or resting. The label is a textual description or heading for the Text Field.

Default floating labels

Bootstrap 5 floating labels are also called animated labels. Enclose a pair of <input class = "form-control"> and <label> components in the ".form-floating" class to enable floating labels with Bootstrap's text field inputs. The placeholder uses for the CSS style in the floating label.

Syntax

The following syntax shows how to create default floating or animated label.

Example

The following example uses the "form-floating" class in the <div> tag. The <input> and <label> tag uses for the insert data and display animated label respectively. Here, example shows the "text" type in the "input" tag but we can use email, number and other input types.

Output

The following image shows the bootstrap 5 floating labels output.

Example

The following example uses the "form-floating" class in the <div> tag. The <input> tag is used to insert data into the database, and the <label> tag is used to display animated labels in the form.

• The first floating label element uses the "placeholder" keyword and the <label> tag together in the form.
• The second floating label function does not use a placeholder keyword but uses a <label> tag.
• The third floating label function does not use the <label> tag. The label tag works like a placeholder in the input tag.

Output

The following image shows the bootstrap 5 floating labels output.

Textarea uses floating labels.

Bootstrap 5 floating labels are also called animated labels. The pair of <textarea class = "form-control"> and <label> components in the ".form-floating" class to enable floating labels with Bootstrap's text field inputs. The placeholder uses for the CSS style in the bootstrap5 floating label.

Syntax

The following syntax shows how to create floating label in the textarea function.

Example

The following example uses the "form-floating" class in the <div> tag. The <textarea> and <label> tag uses for the insert large size data and display animated label respectively.

Output

• The first floating label in the textarea uses the "placeholder" keyword with the <label> tag.
• The second floating label in the textarea does not use placeholder keyword.
• The third floating label in the textarea does not uses <label> tag.

Output

The following image shows the bootstrap 5 floating labels output.

Select Menus use floating labels.

The <select class = "form-control"> and <option> tags use in the ".form-floating" class. This floating label class enables floating labels with Bootstrap's input elements. The <label> tags uses to display label in the select menu. the <select> tag shows input tab and <option> tag shows values for the input data.

Syntax

The following syntax shows how to create floating label in the select label function.

Example

The following example shows the "form-floating" class with select menus in the <div> tag. The <select>, <option> and <label> tag uses for the display input tab, select data from options data and display animated label respectively.

Output

The following image shows the bootstrap 5 floating labels output.

Conclusion

The bootstrap 5 class creates an animated label easily. The bootstrap 5 version floating label uses for animated placeholder and input elements in the web page. It helps make an interactive, user-friendly, and attractive form on the web page.