Bootstrap 5 Basic
Bootstrap 5 Flexbox
Floating labels in Bootstrap 5 allow placeholders inside form inputs to "float" above the input when the user starts typing. This creates a clean and user-friendly design.
To use floating labels, wrap an input or textarea and its associated <label>
inside a container with the class .form-floating
.
Try it yourself
The .form-floating
class works with <textarea>
as well. Ensure you include the placeholder
attribute even if it’s empty.
Try it yourself
Floating labels also work with <select>
elements when styled as form-select
. You must include a blank <option>
element as the first option.
Try it yourself
Floating labels work seamlessly with various input types such as text
, email
, password
, and number
.
Try it yourself
You can use validation classes (is-valid
and is-invalid
) with floating labels to indicate input validity.
Try it yourself