aligns horizontal forms using flex instead of math

twbs · Oct 11, 2017 · 938a1e8 · 938a1e8
1 parent 776188a
commit 938a1e8
Showing 1 changed file with 3 additions and 6 deletions.
diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -88,22 +88,19 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
+  align-self: center;
   margin-bottom: 0; // Override the `<label>` default
   line-height: $input-btn-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
+  align-self: center;
   font-size: $font-size-lg;
   line-height: $input-btn-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
+  align-self: center;
   font-size: $font-size-sm;
   line-height: $input-btn-line-height-sm;
 }