Bootstrap 5 floating labels animate the input label to float above the field when focused or filled. This page covers 4 floating label patterns — basic, select, validation and login form.
Quick Setup
Floating labels need Bootstrap 5.1+ CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Pattern
<div class="form-floating">
<input type="text" class="form-control" id="myInput" placeholder="Required for animation">
<label for="myInput">Your Label</label>
</div>
Critical: label must come AFTER the input. Placeholder is required.
Key Classes Reference
| Class | What It Does |
|---|---|
.form-floating | Wrapper that enables floating label |
.form-control | Input inside floating label |
.form-select | Select inside floating label |
placeholder | Required attribute for animation |
1. Basic Bootstrap 5 Floating Labels
Floating labels that animate to the top when the input is focused or has content.
2. Bootstrap 5 Floating Label Select
Floating labels also work on select dropdowns using form-floating with form-select.
3. Bootstrap 5 Floating Label with Validation
Floating labels with Bootstrap's is-valid and is-invalid validation states.
4. Bootstrap 5 Login Form with Floating Labels
A complete login form using floating labels — clean modern style.
Frequently Asked Questions
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.