Bootstrap 5 Floating Labels for Elements [Textbox, Textarea, Select]

Floating Labels in Bootstrap 5

In this tutorial, you will learn how to create floating labels in form elements (textbox, textarea, and select) using the Bootstrap 5 framework.

How to attach labels to input control?

• In .form-floating, you need to wrap a pair of <input class=”form-control”> and <label>
• This will enable floating labels with Bootstrap’s textual form fields – textboxes, select etc.
• For each <input> element, a placeholder is also required.

Quick demos

Labels with textboxes, In Textarea, Floating label with select, Changing default color, Form validation

The examples below make it further clearer.

An example of allotting labels with textboxes in Bootstrap 5

In this example, we have four textboxes with floating labels:

• First Name
• Last Name
• Email
• Password

See online demo and code

Things to notice in the above code:

• Text to be displayed is written in the <label> tag.
• ID of the input type is mapped with the label by using the “for” attribute of the label.

An example of floating labels with textarea

For this example, we have a textarea where a floating label is created. Along with a textarea, a textbox is also created:

See online demo and code

Relatively large size textarea example

In the above example, you might notice the size of textarea is equal to textbox (which is the default). You may increase the size of textarea by rows attribute but this is not recommended way.

Rather, use the .height property – inline or custom CSS.

See an example below of a bigger textarea with floating label:

See online demo and code

Using floating label with select element

The third input where we can use the floating element is select control. See an example below of its usage:

See online demo and code

What happens if a value is already defined for a field?

If your input text fields already assigned some value while using floating labels then it will adjust accordingly. That is, the floating label will already be in place before the user focus in the input to that element. See an example below where we again used four fields: two with values assigned.

See online demo and code

Changing the default color of floating label example

This is actually quite easy if you want to change the color of labels inside the input controls. One of the ways is using the custom CSS and referring input + label.

See an example below where we changed the label colors to green:

See online demo and code

Only want to change of color as input is focused?

In that case, just use this in the above example (for CSS in the style section before </head> tag:

See online demo and code

Output is as shown below:

You can see in the above graphic that the color of only the focused textbox is green whereas the other is the default color.

Form validation as using floating label example

If you are using form validation and still want to use floating labels then no problems. It still works as you expect. See an example below:

See online demo and code