Bootstrap Floating Labels

Bootstrap 5 introduced Floating Labels, providing a massively engaging, pure CSS animated alternative to traditional stacked labels. Often synonymous with Google's Material Design, these seamlessly scale down and float above the input value whenever the user types or focuses on the area!

The Mandatory Rule Set

Building floating labels completely flawlessly requires three exceptionally strict rules regarding syntax arrangement:

• The parent container definitively requires the .form-floating utility class.
• The <input> must come first. The <label> element must physically be placed after the input inside the HTML.
• The input must have a defined `placeholder="..."` attribute. (Even if it is just a space!) Bootstrap's CSS relies exclusively on the browser's native `:placeholder-shown` pseudo-selector to flawlessly calculate when to execute the float animation!

<!-- Notice the Input is placed ABOVE the Label! -->
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
    <label for="floatEmail">Email address</label>
</div>

Textareas

Floating labels look equally fantastic on standard <textarea> components! Keep in mind, you cannot use the HTML rows="..." property natively inside a floating form because the Bootstrap heights forcefully override it natively to stabilize the label bounding box. If you want a taller textarea box, simply utilize raw CSS or a `style` attribute (e.g., `style="height: 150px"`).

<!-- Do not use 'rows', use CSS 'height' for sizing -->
<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment" id="floatingTA" style="height: 150px"></textarea>
    <label for="floatingTA">Comments</label>
</div>

Select Menus

Beyond traditional typing text boxes, Floating Labels remarkably support native <select> dropdown menus seamlessly too! The `` physically floats exactly corresponding to textual counterparts identically, making unified registration pages look stunning without breaking structural flow.

<!-- Standard Select Dropdown -->
<div class="form-floating">
    <select class="form-select" id="floatSelect">
        <option selected>Choose Your State</option>
        <option value="1">Ohio</option>
        <option value="2">Maine</option>
    </select>
    <label for="floatSelect">State Residence</label>
</div>