Bootstrap 5 Floating Label input Group

Bootstrap 5 Floating Label input Group
Code Snippet:Bootstrap 5: floating labels (from component)
Author: Tomáš Kout
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,058
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X