Bootstrap 5 Float Input

Bootstrap 5 introduced a new feature called float input which allows a label to be floated above an input field. This can be useful when you want to save space on your form by having the label and input field on the same line.

To create a float input in Bootstrap 5, you need to use the form-floating class on the parent div element of the input field. You also need to add the form-control class to the input field.

Here is an example of how to create a float input in Bootstrap 5:

<div class="form-floating">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <label for="email">Email address</label>
</div>

In this example, we have created a float input for an email address field. The label "Email address" is floated above the input field.

You can also customize the color of the label by adding a text class to it. For example:

<div class="form-floating">
  <input type="password" class="form-control" id="password" placeholder="Password">
  <label for="password" class="text-danger">Password</label>
</div>

In this example, the label "Password" is displayed in red.

Overall, float input is a useful feature in Bootstrap 5 that can help you save space on your forms. Just remember to use the form-floating and form-control classes correctly to create a good looking float input.