Clarify usage of .form-label with .form-floating

[imagoiq]

Hi,

According to the Migration guide of v5.0, "Form labels now require .form-label.". But when looking at the documentation page of Floating labels, no label use this class.

I also encountered a bug with Readonly plaintext where if you change the $input-bg variable to something different from the body background, the label background is visible.

<div class="form-floating">
    <input type="text" class="form-control-plaintext" readonly value="my value" id="a-field">
    <label class="form-label" for="a-field">My label</label>
</div>

So now I'm totally confused. Should I report a bug for the issue above? Is the doc page missing the .form-label? Is .form-floating label compatible with .form-label?

[julien-deramond]

Hello @imagoiq

"Form labels now require .form-label.".
...
So now I'm totally confused. Should I report a bug for the issue above? Is the doc page missing the .form-label? Is .form-floating label compatible with .form-label?

.form-label are used for regular form controls (e.g. https://getbootstrap.com/docs/5.3/forms/form-control/). Floating labels are particular and don't require any extra .form-label class since it's handled directly by .form-floating put on the surrounding <div>.

I also encountered a bug with Readonly plaintext where if you change the $input-bg variable to something different from the body background, the label background is visible.

I'm not entirely sure whether this is an issue, it seems rather consistent and acceptable to have the label background visible here.

[imagoiq]

Thanks for the clarification. It would be nice to precise it in the migration doc page, I think. I worked with several different teams and I saw this mix of classes multiple time.

[julien-deramond]

Thank you for the feedback. I'll add that to my to-do list and try to find a way to make it more understandable.