Lesson 36: Form Floating Label in Bootstrap 5

Floating labels are a feature that lets you create simple form labels that stand out above input fields. Here's how to create floating labels in Bootstrap 5 .

How to create floating and dynamic labels

By default, when using labels, they usually appear at the top of the input field:

With floating labels, you can insert labels inside input fields, making them float/move when the input field is clicked. Sample code:

 Email Password 

For example:

Note on floating labels: Elements must be placed after thetag, and the attribute placeholderis needed for the element (even if it's not visible).

Text field

It also works with text input areas. Sample code: