Bootstrap 5 Form Floating Label
Bootstrap 5 floating labels are animated form labels that start inside the input field as placeholder text, then smoothly float above the field when the user types or the input receives focus. They save vertical space, look modern, and maintain label visibility at all times — solving the placeholder-label trade-off.
Primary Class
.form-floatingCommon Use Cases
- →Compact contact forms
- →Login and signup pages
- →Newsletter email capture
- →Search inputs with inline labels
- →Multi-step wizard forms
- →Dark-themed modal forms
Variants & Classes
| Variant | Description |
|---|---|
| Text input | Standard floating label over a text input. |
| Textarea | Floating label over a multi-line textarea. |
| Select dropdown | Floating label over a select element. |
| With validation | Green/red validation feedback alongside floating label. |
Code Example
<div class="form-floating mb-3">
<input type="email" class="form-control" id="emailInput"
placeholder="[email protected]">
<label for="emailInput">Email address</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" id="messageInput"
style="height:120px" placeholder="Your message"></textarea>
<label for="messageInput">Message</label>
</div>
<div class="form-floating">
<select class="form-select" id="planSelect">
<option selected>Select a plan</option>
<option value="1">Starter</option>
<option value="2">Pro</option>
</select>
<label for="planSelect">Plan</label>
</div>Live Examples
Email Input
Standard floating label email input with placeholder animation.
Textarea
Floating label over a multi-line textarea with fixed height.
Select Dropdown
Floating label that works with select elements — label stays visible after selection.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Dark modal login form with floating labels
- ✓Newsletter capture with email floating label
- ✓Multi-step checkout with animated field labels
- ✓Contact form with icon + floating label hybrid
- ✓Search bar with floating label in navbar
Best Practices
Always provide a placeholder attribute
Floating labels require a placeholder attribute (even if empty) to trigger the CSS animation. Without it, the label won't float above the input on focus.
Use mb-3 on each floating wrapper for spacing
form-floating elements don't have built-in bottom margin. Add mb-3 to each wrapper div to maintain consistent vertical rhythm in your form.
Match the label 'for' to the input 'id'
The label's for attribute must exactly match the input's id. This association enables clicking the label to focus the input and is required for screen reader accessibility.