Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

38 of 39
BS5 RangeBS5 Input GroupsBS5 Floating LabelsBS5 Form Validation

🏷️ BS5 Floating Labels

📌 What Are Bootstrap 5 Floating Labels?

Floating labels move the label inside the input and float it above when the field is focused or has a value. Use .form-floating as the wrapper, put the input (with .form-control) first, then the label (with for matching input id). The label must come after the input.

🏷️ Basic Floating Label (.form-floating)

.form-floating – wrapper. Place input.form-control first, then label. Use placeholder on the input (can match label text). Label floats up when focused or when input has value.

Example02
Loading editor…

✅ Floating Label Best Practices

  • Input must come before the label inside .form-floating.
  • Use placeholder so the label has space when floating.
  • Use .form-select with floating labels for selects (same order: select then label).

🧠 Test Your Knowledge

2 Questions
Progress: 0 / 2