Bootstrap 5.2 Center Floating Label In Form

HTML & CSS
#1

Hi All

I have a form with a floating label:

<div class="form-floating mb-2">
              <input type="text" class="form-control text-center" name="memberUsername" id="memberUsername" placeholder="Username" required>
              <label class="text-center" for="memberUsername">Username</label>
              <div class="invalid-feedback">Your Username is required</div>
            </div>

I want the label to be centered… which it is however when you click the field the label becomes small but instead of staying centered it moves up and to the left rather then up and centered.

I am sure this is simple but can’t work out how to fix this.

Any ideas?

mrmbarnes

#2

I found the answer eventually… I needed to add this CSS

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  left: 50%;
  top: 30%;
  transform: scale(0.85) translate(-50%, -50%);
}
1 Like
#3

I was just about to post a similar solution.

Glad you managed on your own.

Remember though that changing the default bootstrap code directly will affect all floating labels (which may be want you want).