Alignment issue with floating labels and small select (form-select-sm) padding in Bootstrap 5.3

[patrickzzz]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have encountered an alignment issue when using Bootstrap 5.3’s floating labels with the small select element (form-select-sm). The selected value is misaligned, appearing further to the left than the floating label due to the reduced padding applied to the small select.

Steps to reproduce:

1.	Create a form with a floating label using the form-floating class.
2.	Include a select element with the class form-select-sm.
3.	Observe that the selected value does not align with the floating label.

Expected behavior:
The selected value should align correctly with the floating label, regardless of the select size.

Actual behavior:
The selected value is offset to the left, causing misalignment with the label.

For a reduced test case demonstrating this issue, please refer to my CodePen link: [VIew on Code Pen].

Reduced test cases

https://codepen.io/patrickzzz/pen/GRVXjLK

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3 (latest)

[louismaximepiton]

Hey there, thanks for your contribution!

I confirm that it doesn't work well with select sizes as mentioned in the doc.

That said, I'm fine having it in Bootstrap since it looks more logical. Feel free to open a PR around this subject.

[patrickzzz]

Hi @louismaximepiton, thanks!
I added the PR: #41013
I kept the change minimal, as i saw, also in other places, a "*-padding-x" variable is only applied to either left/right (e.g.: https://github.com/twbs/bootstrap/blob/main/scss/forms/_form-select.scss#L11 ). Of course, the right padding shall not be changed, as it is place of the select-dropdown-arrow.

Regards,
Patrick