Bootstrap - Form Floating Labels Part 1: Introduction to Floating Labels in Bootstrap 5
What Are Floating Labels?
Floating labels allow form placeholders to act as labels that float above the input field when the user starts typing. This approach reduces clutter while maintaining usability.
Basic Syntax
To create a floating label, wrap an <input> field and a <label> inside a <div class="form-floating">.
Example 1: Basic Floating Label for a Text Input
<!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 Labels</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="form-floating">
<input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
<label for="nameInput">Full Name</label>
</div>
</div>
</body>
</html>
Explanation:
The form-floating class is added to the wrapper div.
The <label> is placed after the <input> field.
The placeholder attribute is necessary to ensure the floating effect works.
Example 2: Floating Label with a Password Field
<div class="form-floating mt-3">
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
<label for="passwordInput">Password</label>
</div>
This example demonstrates a password field with floating labels.
