WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Floating Label

Previous Next

Floating labels in Bootstrap 5 allow placeholders inside form inputs to "float" above the input when the user starts typing. This creates a clean and user-friendly design.

Basic Floating Label:

To use floating labels, wrap an input or textarea and its associated <label> inside a container with the class .form-floating.

Example
<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>
Try it yourself

Floating Labels for Textarea:

The .form-floating class works with <textarea> as well. Ensure you include the placeholder attribute even if it’s empty.

Example
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
Try it yourself

Floating Labels with Select Menus:

Floating labels also work with <select> elements when styled as form-select. You must include a blank <option> element as the first option.

Example
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="floatingSelect">Choose an option</label>
</div>
Try it yourself

Input Types Supported:

Floating labels work seamlessly with various input types such as text, email, password, and number.

Example
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
Try it yourself

Validation with Floating Labels:

You can use validation classes (is-valid and is-invalid) with floating labels to indicate input validity.

Looks good!
Please enter a valid value.
Example
<div class="form-floating mb-3">
<input type="text" class="form-control is-valid" id="floatingValid" placeholder="Valid input">
<label for="floatingValid">Valid input</label>
<div class="valid-feedback">Looks good!</div>
</div>

<div class="form-floating mb-3">
<input type="text" class="form-control is-invalid" id="floatingInvalid" placeholder="Invalid input">
<label for="floatingInvalid">Invalid input</label>
<div class="invalid-feedback">Please enter a valid value.</div>
</div>
Try it yourself

Floating Label Form

Try it yourself

Previous Next