'col-form-label' does not vertical align properly

[robvaneck]

npm installed boostrap
"bootstrap": "^4.0.0-beta",

issue
Vertical alignment of the 'col-form-label' is off.

TL;DR;
Why? Because the form-control has no fixed height... thus 'border-box' has no impact when adding borders.. > the borders add to the total height. So: 2px border on the input will add +4px instead of going inside. E.g. 44px vs 40px without borders. But if the input would have had height 40px.. then border-box would have done it's job and added the 2* 2px border inside those 40px.. this is not the case atm.

So the calculation of the 'col-form-label' is wrong (when there is no height on the form-control):

_forms.scss line 93
padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
it has the opposite effect to substract "#{$input-btn-border-width} * 2);"

solution
padding-top: input-btn-padding-y; padding-bottom: $input-btn-padding-y;

[wojtask9]

should be fixed in #23121

[robvaneck]

Thank you! And for this Bootstrap, it's awesome

[andresgalante]

@borriej thanks for reporting it.

This can be also done by align-items: center the form-group or align-self: center .col-form-label instead of so much maths.

I'll take a look at that and close this issue since it's solved by #23121