Core Code
Core Code Modern Dev Handbook

Floating Textarea

Use floating labels with textarea elements.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-5">

<div class="form-floating">

<textarea class="form-control" placeholder="Message" id="messageArea" style="height:120px"></textarea>

<label for="messageArea">Message</label>

</div>

</div>

</body>
</html>

More BS5 Floating Labels Examples (7)

example Basic Floating Label open example example Floating Email Input open example example Floating Password Input open example example Floating Select open example example Multiple Floating Inputs open example example Floating Login Form open example example Floating Search Field open example