-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Floating Labels
Floating labels in Bootstrap provide an elegant way to ensure form labels are always visible, while also saving space. This feature enhances the user experience by allowing labels to float over form fields when they’re active or filled in. It’s a modern design approach that’s especially useful in forms with limited space.
How Floating Labels Work
– Initial State: When a form field is empty, the floating label appears inside the input box in a smaller font size.
– Active State: When the field is clicked or receives focus, the label floats above the input field, allowing the user to see the label while they type.
– Filled State: If the field is filled out and loses focus, the label remains floated.
Here’s a table listing the classes specifically used for floating form inputs in Bootstrap, along with their descriptions:
Bootstrap Class | Description |
.form-floating | This class is used on the container div that wraps both the input and label elements, enabling the floating label effect. |
.form-control | Applied to the <input> element. This class is necessary to style the input according to Bootstrap’s standard form input styles. |
placeholder Attribute | Though not a class, the placeholder attribute on the <input> element is crucial for the floating label effect. It should match the label text. |
<label> Tag | Used for the label element that floats. The for attribute of the label should match the id of the corresponding input field for accessibility. |
These classes and elements work together to create the floating label effect in Bootstrap forms. The .form-floating class is essential for initializing this effect, while the .form-control class and the placeholder attribute are necessary to ensure proper styling and functionality of the input fields. The label tag, with its for attribute correctly set, not only aids in accessibility but also is key in creating the floating effect when the user interacts with the input.
Implementing Floating Labels
To implement floating labels in Bootstrap, you typically use the `.form-floating` class around your input fields and labels.
Explanation
– Form Floating Wrapper: Each floating label and input pair is wrapped in a `div` with the class `.form-floating`.
– Input Field: The `<input>` element is styled with `.form-control`. The `placeholder` attribute is necessary for the floating label effect to work properly.
– Label: The `<label>` follows the input field. It’s associated with the input via the `for` attribute, which matches the input’s `id`.
– Margin (`mb-3`): The class `mb-3` is used to add a margin at the bottom of the first floating label, providing space between multiple fields.
Best Practices
– Accessibility: Ensure that the `for` attribute of the label matches the `id` of the input field. This linkage is important for screen readers and other assistive technologies.
– Placeholder Text: While the placeholder attribute is required for the floating effect, it’s typically kept generic because the label provides the necessary information.
– Styling: Floating labels can be styled further with custom CSS to match the overall design of the form or website.
Floating labels offer a stylish and space-saving solution in modern web design, particularly in forms where space is at a premium or a minimalist design is desired. They enhance user experience by keeping labels visible at all times without taking extra space.
YouTube Reference :
1) Floating Labels in Hindi/Urdu
