Bootstrap 5 Floating Labels: A Complete Guide

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.

Email address

Example

<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.

Comments

Example

<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.

Choose an option

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.

Password

Example

<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.

Valid input

Looks good!

Invalid input

Please enter a valid value.

Example

<label for="floatingValid">Valid input</label>

<div class="valid-feedback">Looks good!</div>

</div>

<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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.