Bootstrap 5 Floating labels Textareas
Last Updated :
19 Dec, 2022
Bootstrap 5 Floating Label is used to give a beautiful-looking floating label to input elements. For this, we have to place the <input> element and the <label> element inside a container with the form-floating class. The input should be the first element inside the form-floating container.
The Floating label Textarea will have a height similar to the input element. To change the height of the text area, the CSS height property should be used instead of setting the rows for the text area.
Bootstrap5 Floating labels Textareas Class: There will be no particular class for floating textarea. Only the textarea tag under the form-floating class do the role.
Note: The rows attribute is used to set the rows for the text area but with a floating label, it does not work.
Syntax:
<div class="form-floating">
<textarea id="textareaID" class="form-control"></textarea>
<label for="textareaID">...</label>
</div>
Example 1: In this example, we show a text area element with a floating label.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap5 Floating Label Textarea
</strong>
</div>
<div class="form-floating mt-4">
<textarea id="gfg" class="form-control"
placeholder="It is necessary to have a placeholder">
</textarea>
<label for="gfg">Introduce yourself here</label>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this article, we will be showing how to change the height of the text area with a floating label. The rows attribute does not work here, we have to use the height style to set the height of the text area.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap5 Floating Label Textarea</strong>
</div>
<p><strong>Custom Height</strong></p>
<p class="mt-4">
Textarea with rows set to 10 (No Effect on Height)
</p>
<div class="form-floating">
<textarea id="gfg" rows="10" class="form-control"
placeholder="Introduce Here"></textarea>
<label for="gfg">Introduce yourself here</label>
</div>
<p class="mt-4">
Textarea with height set to 250px (Height Changes)
</p>
<div class="form-floating">
<textarea id="gfg" style="height: 250px;"
class="form-control"
placeholder="Introduce Here">
</textarea>
<label for="gfg">Introduce yourself here</label>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.2/forms/floating-labels/#textareas
Share your thoughts in the comments
Please Login to comment...