Bootstrap 5 Floating labels
Last Updated :
16 Apr, 2024
Bootstrap 5 floating labels are form labels that float over input fields, improving UX. Wrap form controls like <input>, <label>, <textarea>, <select> inside <div> with class .form-floating. Ensure these elements precede <label> inside the floating <div>.
Bootstrap 5 Floating labels:
| Component | Description |
|---|
| Textareas | Use CSS height property for Floating label Textarea, adjusting height similar to the input. |
| Selects | Utilize Floating labels Component Selects for input fields with floating labels. |
| Layout | Employ Floating labels Layout within a grid system, placing form elements within column classes. |
| Sass | Customize Floating labels by adjusting default values in Bootstrap 5 SCSS files for tailored usage. |
Syntax:
<div class="form-floating"> ...</div>
Examples of Bootstrap 5 Floating labels
Example 1: In this example, <input>, <textarea>, and <label> elements are wrapped inside <div> element with .form-floating class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Bootstrap 5 Floating Label</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body class="text-center">
<div
class="container"
style="width: 700px"
>
<h6>Bootstrap 5 Floating label</h6>
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingName"
placeholder="studentName"
/>
<label
for="floatingName"
class="text-success"
>
Name</label
>
</div>
<div class="form-floating pt-2">
<input
type="number"
class="form-control"
id="floatingAge"
placeholder="studentAge"
/>
<label
for="floatingAge"
class="text-success"
>
Age
</label>
</div>
<div class="form-floating pt-2">
<textarea
class="form-control"
placeholder="Enter your address"
id="floatingAddress"
style="height: 120px"
>
</textarea>
<label
for="floatingAddress"
class="text-success"
>
Address
</label>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Floating labels Example Output
Example 2: In this example, <select> and <label> elements are wrapped inside <div> element with .form-floating class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Bootstrap 5 Floating Label</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body class="text-center">
<div
class="container"
style="width: 700px"
>
<h6>Bootstrap 5 Floating label</h6>
<div class="form-floating">
<select
class="form-select pt-3"
id="floatingSelectMenu"
>
<option selected>
Click here to choose
</option>
<option value="java">
Java
</option>
<option value="c++">
C++
</option>
<option value="python">
Python
</option>
<option value="c">C</option>
<option value="golang">
Golang
</option>
</select>
<label for="selectLabel">
Choose your programming
language
</label>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Floating labels Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...