bootstrap floating labels slides to the center when the direction is rtl

Question

I am trying to display floating labels in Hebrew using bootstrap v5.2. The problem is that when I change the direction to rtl when the input box is clicked the label slides towards the middle.

my code:

<div class="form-floating mb-3" dir="rtl">
        <input class="form-control" id="title" placeholder="כותרת"></input>
        <label for="title">כותרת</label>
</div>

You can see that the text moves to the center and does not stay adjacent to the right

I tried to change the direction back to ltr only in the label, it worked but it doesn't look good in Hebrew (sticks to the left side of the box).

Answer 1

Add a custom class and use these css codes:

<style>
    .form-floating.custom-class>label {
        top: 0;
        right: 0;
        transform-origin: 100% 0;
        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    }
    .form-floating.custom-class>.form-control-plaintext~label, .form-floating.custom-class>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(-0.15rem);
    }
</style>


<div class="form-floating mb-3 custom-class" dir="rtl">
    <input class="form-control" id="title" placeholder="כותרת"></input>
    <label for="title">כותרת</label>
</div>