This Bootstrap 5 snippet helps you to create floating label for the input group. It utilizes Bootstrap native inputs and floating features. It enhances user experience by dynamically displaying labels when input fields are focused or filled. This makes your web forms more user-friendly and interactive.
This code is perfect for contact forms, login pages, and registration forms, providing a modern and engaging user experience.
How to Create Floating Label Input Group Using Bootstrap 5
1. First, include the Bootstrap 5 CSS library by adding the following link to the <head> section of your HTML file:
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css'>
2. Inside the <form> element, define your form structure. To create a floating label input group, wrap each input element with a <div> having the class “form-floating.”
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
You can repeat the previous step for more input fields, each wrapped in a “form-floating” <div>. Customize the input type, ID, and placeholder as needed.
3. To make the labels float and transition smoothly, add the following CSS code to your stylesheet. This CSS code ensures that labels become visible when the input field is focused or has content.
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
You’ve successfully implemented Bootstrap 5 floating label input groups in your web project. This enhances the user experience, making your forms more engaging and visually appealing. Feel free to adjust the design and style to suit your project’s needs, and create forms that users will find intuitive and attractive.
Similar Code Snippets:
Bootstrap 5 Creative Header Template- Bootstrap 5 Inline Form Example
- Bootstrap Progress Bar Animation on Page Load
- Bootstrap 5 Gallery With Lightbox
- Bootstrap 5 Popover with HTML Content
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.