Bootstrap - Form Floating Labels Part 4: Floating Labels with Textareas

Textareas support floating labels, allowing users to type multi-line text.

Example 7: Floating Label for a Textarea

<div class="form-floating mt-3">

    <textarea class="form-control" id="messageInput" placeholder="Leave a message" style="height: 120px"></textarea>

    <label for="messageInput">Your Message</label>

</div>

Explanation:

The textarea field is wrapped inside a form-floating div.

The height of the textarea is adjusted using inline styles.

The floating label enhances clarity while saving space.