In Bootstrap 5, you can create floating labels for form inputs using the `form-floating` class. Floating labels provide a modern and interactive way to label form inputs, where the label floats above the input when the user interacts with it. Here's an example of how to create floating labels in Bootstrap 5:

html
<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>

In this example, we have a `<div>` element with the class `form-floating`. Inside the `form-floating` container, we have an `<input>` element with the class `form-control` which is used to style it as a Bootstrap form input. The `<label>` element is associated with the input using the `for` attribute, and it provides the label text. The placeholder attribute on the input is optional and can be used to provide a hint to the user.

You can apply the `form-floating` class to various input types such as text inputs, email inputs, password inputs, and more.

Here are a few additional notes about floating labels in Bootstrap 5:

- Automatic Label Animation:
The label automatically animates and floats above the input when the user interacts with it, such as typing or focusing on the input.

- Required Inputs:
If you have required inputs, you can add the `required` attribute to the input element. Bootstrap will automatically apply the appropriate styling to indicate the required field.

- Sizing Options:
You can adjust the size of the floating label and input using Bootstrap's sizing classes such as `form-control-sm` for small size and `form-control-lg` for large size.

html
<div class="form-floating">
    <input type="text" class="form-control form-control-sm" id="floatingInputSmall" placeholder="Small input">
    <label for="floatingInputSmall">Small input</label>
</div>

<div class="form-floating">
    <input type="text" class="form-control form-control-lg" id="floatingInputLarge" placeholder="Large input">
    <label for="floatingInputLarge">Large input</label>
</div>

These are some basic examples of creating floating labels in Bootstrap 5. You can customize them further by using additional utility classes, adding validation styles, or combining them with other form components. Make sure to refer to the Bootstrap documentation for more options and styling classes: https://getbootstrap.com/docs/5.1/forms/floating-labels/

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc