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.

🅱️

bootstrap Designer

Live Component Playground

html Source
Loading...
Built with Bootstrap 5.3 • Enterprise Ready

✅ 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
Keep Going!BS5 Form Validation