Bootstrap 5 floating label on top of the field

Question

I want to put the floating label just like this:

The normal behaviour would be this but the input area is way to big for my purpose.

I don't have an idea how to set this up. For Bootstrap 4 there was an extra framework but this won't work with V5.

Thanks in advance!

Answer 1

You can overwrite the corresponding bootstrap 5 css class:

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

Set translateY(-.5rem) to -2rem or -20px or whatever fit's your layout. You can also set background: white;

Answer 2

You could use a <fieldset> and <legend> with your <input> inserted

<fieldset>
    <legend>Password</legend>
    <input type="password">
</fieldset>

Then use CSS to set the padding / margin / border etc, as desired

More info: https://www.w3schools.com/tags/tag_fieldset.asp

Answer 3

Floating Labels are a thing in Bootstrap 5.2.

Here is the way it would be done:

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> to leverage the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>