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

Created by: 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;