Bootstrap 5 Floating Label

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


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.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.