Floating Labels in Bootstrap
What Are Floating Labels?
Floating labels make sure the form labels are always visible while saving space. The label starts inside the input box and moves up when the user types. This makes forms look modern and clean.
How Do Floating Labels Work?
1. Before Typing (Initial State): The label is inside the input field in a small size.
2. While Typing (Active State): When the user clicks or types, the label moves above the input.
3. After Typing (Filled State): When the user finishes typing and clicks outside, the label stays above the input.
Important Bootstrap Classes
| Class Purpose | Purpose |
|---|---|
| .form-floating | Wraps the input and label to create the floating effect. |
| .form-control | Applied to for proper styling. |
| placeholder Attribute | Helps trigger the floating label effect (text should match the label). |
| Used for labeling the input. The for attribute must match the input id for accessibility. |
How to Use Floating Labels?
To use floating labels, wrap the input and label inside a div with .form-floating.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Floating Labels Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-5″>
<form>
<div class=”form-floating mb-3″>
<input type=”text” class=”form-control” id=”name” placeholder=”Enter your name”>
<label for=”name”>Your Name</label>
</div>
<div class=”form-floating mb-3″>
<input type=”email” class=”form-control” id=”email” placeholder=”Enter your email”>
<label for=”email”>Your Email</label>
</div>
<div class=”form-floating”>
<input type=”password” class=”form-control” id=”password” placeholder=”Enter your password”>
<label for=”password”>Your Password</label>
</div>
<button type=”submit” class=”btn btn-primary mt-3″>Submit</button>
</form>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
In this Example:
1. Form Floating Wrapper (.form-floating): Each input and label is inside a div with .form-floating.
2. Input Field (.form-control): The <input> is styled using .form-control and a placeholder.
3. Label (<label>): The <label> is linked to the input using for=”id”.
4. Spacing (mb-3): The mb-3 class adds space between input fields.
Conclusion
Floating labels in Bootstrap help create modern and user-friendly forms by ensuring labels are always visible while saving space. They improve readability and accessibility, making forms look clean and organized.
By using .form-floating, .form-control, and proper <label> placement, you can easily implement floating labels in your forms. This technique is especially useful in forms with multiple fields, enhancing the overall user experience.
To practice, try implementing floating labels for Phone Number, Address, and Gender Selection using <input>, <textarea>, and <select> inside .form-floating. Happy coding! 🚀
Practice Scenario:
1. Create a form with the following floating label fields:
o Phone Number (<input type=”tel”>)
o Address (<textarea> inside .form-floating)
o Gender Selection (Use a <select> dropdown inside .form-floating
Expected Output:
YouTube Reference :
Bootstrap floating labels are a stylish way to display form input field labels. The labels float above the input fields when the user interacts with them.
es, Iqra Technology offers this tutorial online for free.
The tutorial provides examples of implementing floating labels, customizing styles, and integrating them into responsive forms.
This tutorial is perfect for web developers, designers, and beginners who want to learn and implement floating labels in their web projects.
Yes, all code snippets and examples in the tutorial are free to use for personal and commercial projects.
Yes, the tutorial covers how to create responsive floating labels optimized for mobile-friendly web design.
Yes, Iqra Technology provides the tutorial in both English and Hindi for broader accessibility.
Visit the Bootstrap Floating Labels Tutorial Page to begin.
Floating labels are ideal for modern forms, improving user experience and ensuring a clean, compact design.
