Bootstrap 5 FormsLesson 39Free preview

BS5 Floating Labels

This lesson is part of Bootstrap · All levels

Summary

Floating labels make the label appear to float above the filling column when the user fills or focuses, saving space while remaining informative. By the way, wrap <input> and <label> with .form-floating and make sure the label is written after the input. These elements support input, select, and textarea.

Key points

Frame the input and floating labels.
The mandatory order: <input> and then <label> in .form-floating.
The height of the .form-floating element is large enough for the label to have a floating space.
Supports input, textarea, and select.
Placeholders remain necessary for labeling behavior to conform to design.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.