Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Floating Labels in Bootstrap 5
Floating Labels: A modern form design where labels animate and float above the input when focused or filled.
Basic Floating Labels
Standard Floating Labels
<!-- Basic Floating Label -->
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
>
<label for="floatingInput">Email address</label>
</div>
<!-- Floating Label with Password -->
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
>
<label for="floatingPassword">Password</label>
</div>Different Input Types with Floating Labels
Various Input Types
<!-- Various Input Types -->
<div class="form-floating">
<input type="text" class="form-control" id="floatingText" placeholder="John Doe">
<label for="floatingText">Full Name</label>
</div>
<div class="form-floating">
<input type="tel" class="form-control" id="floatingPhone" placeholder="Phone">
<label for="floatingPhone">Phone Number</label>
</div>
<div class="form-floating">
<input type="number" class="form-control" id="floatingNumber" placeholder="100">
<label for="floatingNumber">Age</label>
</div>
<div class="form-floating">
<input type="date" class="form-control" id="floatingDate">
<label for="floatingDate">Date of Birth</label>
</div>Textarea with Floating Labels
Multi-line Text Inputs
<!-- Textarea with Floating Label -->
<div class="form-floating">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="floatingTextarea"
style="height: 100px"
></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<!-- Larger Textarea -->
<div class="form-floating">
<textarea
class="form-control"
placeholder="Describe your issue"
id="floatingTextarea2"
style="height: 150px"
></textarea>
<label for="floatingTextarea2">Issue Description</label>
</div>Select with Floating Labels
Dropdown Selects
<!-- Select with Floating Label -->
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>Choose a country</option>
<option value="1">United States</option>
<option value="2">United Kingdom</option>
</select>
<label for="floatingSelect">Country</label>
</div>
<!-- Multiple Select with Floating Label -->
<div class="form-floating">
<select class="form-select" id="floatingSelectMultiple" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<label for="floatingSelectMultiple">Multiple Select</label>
</div>Floating Label Sizing
Different Sizes
Small
Default
Large
Small Select
Large Select
<!-- Small Floating Input -->
<div class="form-floating">
<input
type="text"
class="form-control form-control-sm"
id="floatingSmall"
placeholder="Small input"
>
<label for="floatingSmall" class="small">Small Input</label>
</div>
<!-- Large Floating Input -->
<div class="form-floating">
<input
type="text"
class="form-control form-control-lg"
id="floatingLarge"
placeholder="Large input"
>
<label for="floatingLarge" class="h5">Large Input</label>
</div>
<!-- Small Floating Select -->
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmall">
<option selected>Small select</option>
<option value="1">Option 1</option>
</select>
<label for="floatingSelectSmall" class="small">Small Select</label>
</div>
<!-- Large Floating Select -->
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLarge">
<option selected>Large select</option>
<option value="1">Option 1</option>
</select>
<label for="floatingSelectLarge" class="h5">Large Select</label>
</div>Validation with Floating Labels
Valid and Invalid States
Valid Inputs
Looks good!
Invalid Inputs
Please provide a valid email.
Please select a valid option.
<!-- Valid Floating Input -->
<div class="form-floating">
<input
type="email"
class="form-control is-valid"
id="floatingValid"
placeholder="name@example.com"
value="user@example.com"
>
<label for="floatingValid">Email address</label>
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- Invalid Floating Input -->
<div class="form-floating">
<input
type="email"
class="form-control is-invalid"
id="floatingInvalid"
placeholder="name@example.com"
value="invalid-email"
>
<label for="floatingInvalid">Email address</label>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<!-- Valid Floating Select -->
<div class="form-floating">
<select class="form-select is-valid" id="floatingSelectValid">
<option selected>Choose...</option>
<option value="1" selected>Valid option</option>
</select>
<label for="floatingSelectValid">Valid select</label>
</div>Readonly and Disabled States
Non-editable Floating Labels
Readonly Inputs
Disabled Inputs
<!-- Readonly Floating Input -->
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingReadonly"
placeholder="Readonly input"
value="Cannot edit this value"
readonly
>
<label for="floatingReadonly">Readonly Field</label>
</div>
<!-- Disabled Floating Input -->
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingDisabled"
placeholder="Disabled input"
disabled
>
<label for="floatingDisabled">Disabled Field</label>
</div>
<!-- Disabled Floating Select -->
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" disabled>
<option selected>Disabled select</option>
<option value="1">Option 1</option>
</select>
<label for="floatingSelectDisabled">Disabled Select</label>
</div>Practical Examples
Login Form
<!-- Login Form with Floating Labels -->
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="loginEmail" placeholder="name@example.com">
<label for="loginEmail">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="loginPassword" placeholder="Password">
<label for="loginPassword">Password</label>
</div>
<button type="submit" class="btn btn-primary w-100">Sign in</button>
</form>Registration Form
<!-- Registration Form -->
<form>
<div class="row g-2 mb-3">
<div class="col-md">
<div class="form-floating">
<input type="text" class="form-control" id="regFirstName" placeholder="First name">
<label for="regFirstName">First Name</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<input type="text" class="form-control" id="regLastName" placeholder="Last name">
<label for="regLastName">Last Name</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="regEmail" placeholder="name@example.com">
<label for="regEmail">Email address</label>
</div>
<button type="submit" class="btn btn-success w-100">Register</button>
</form>Best Practices
When to Use Floating Labels
- Modern form design: When you want a contemporary, clean look
- Space-saving layouts: When vertical space is limited
- Mobile-first design: Excellent for mobile interfaces
- Complex forms: When you have many form fields
- User experience focus: When you want to guide users through forms
- Placeholder replacement: As an alternative to placeholders
Common Mistakes to Avoid
- ❌ Forgetting the
placeholderattribute (required for proper animation) - ❌ Using with checkboxes or radios (not supported)
- ❌ Mixing floating labels with regular labels in the same form
- ❌ Not providing enough contrast between label and input
- ❌ Using for very short forms where regular labels work better
- ❌ Not testing with pre-filled values
