Fix up some form docs styles, sizing, etc

dist/css/bootstrap.css

@@ -1684,10 +1684,6 @@ pre code {
   border: 1px solid #eceeef;
 }
 
-.form-control-label {
-  padding: .5625rem .75rem;
-}
-
 .form-control {
   display: block;
   width: 100%;
@@ -1708,7 +1704,7 @@ pre code {
 }
 .form-control:focus {
   border-color: #66afe9;
-  outline: 0;
+  outline: none;
 }
 .form-control::-webkit-input-placeholder {
   color: #999;
@@ -1738,6 +1734,38 @@ pre code {
   display: block;
 }
 
+.form-control-label {
+  padding: .5625rem .75rem;
+  margin-bottom: 0;
+}
+
+.form-control-static {
+  min-height: 2rem;
+  padding-top: .5625rem;
+  padding-bottom: .5625rem;
+  margin-bottom: 0;
+}
+.form-control-static.form-control-sm, .form-control-static.form-control-lg {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.form-control-sm {
+  height: 2rem;
+  padding: .3rem .75rem;
+  font-size: .85rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+.form-control-lg {
+  height: 3.291667rem;
+  padding: .75rem 1.5rem;
+  font-size: 1.25rem;
+  line-height: 1.333333;
+  border-radius: .3rem;
+}
+
 .form-group {
   margin-bottom: 15px;
 }
@@ -1792,33 +1820,6 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
   cursor: false;
 }
 
-.form-control-static {
-  min-height: 2rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  margin-bottom: 0;
-}
-.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.input-group-addon, .input-group-sm > .input-group-btn > .form-control-static.btn {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.form-control-sm {
-  height: 2rem;
-  padding: .3rem .75rem;
-  font-size: .85rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
-.form-control-lg {
-  height: 3.291667rem;
-  padding: .75rem 1.5rem;
-  font-size: 1.25rem;
-  line-height: 1.333333;
-  border-radius: .3rem;
-}
-
 .has-feedback {
   position: relative;
 }

docs/components/forms.md

@@ -629,35 +629,18 @@ For form controls with no visible label, add the `.sr-only` class on the label.
 
 ## Control sizing
 
-Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
+Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
 
 {% example html %}
-<input class="form-control input-lg" type="text" placeholder=".input-lg">
+<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
 <input class="form-control" type="text" placeholder="Default input">
-<input class="form-control input-sm" type="text" placeholder=".input-sm">
-
-<select class="form-control input-lg"></select>
-<select class="form-control"></select>
-<select class="form-control input-sm"></select>
+<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
 {% endexample %}
 
-Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
-
 {% example html %}
-<form class="form-horizontal">
-  <div class="form-group form-group-lg">
-    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
-    <div class="col-sm-10">
-      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
-    </div>
-  </div>
-  <div class="form-group form-group-sm">
-    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
-    <div class="col-sm-10">
-      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
-    </div>
-  </div>
-</form>
+<select class="form-control form-control-lg"></select>
+<select class="form-control"></select>
+<select class="form-control form-control-sm"></select>
 {% endexample %}
 
 ## Column sizing

docs/dist/css/bootstrap.css

@@ -1684,10 +1684,6 @@ pre code {
   border: 1px solid #eceeef;
 }
 
-.form-control-label {
-  padding: .5625rem .75rem;
-}
-
 .form-control {
   display: block;
   width: 100%;
@@ -1708,7 +1704,7 @@ pre code {
 }
 .form-control:focus {
   border-color: #66afe9;
-  outline: 0;
+  outline: none;
 }
 .form-control::-webkit-input-placeholder {
   color: #999;
@@ -1738,6 +1734,38 @@ pre code {
   display: block;
 }
 
+.form-control-label {
+  padding: .5625rem .75rem;
+  margin-bottom: 0;
+}
+
+.form-control-static {
+  min-height: 2rem;
+  padding-top: .5625rem;
+  padding-bottom: .5625rem;
+  margin-bottom: 0;
+}
+.form-control-static.form-control-sm, .form-control-static.form-control-lg {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.form-control-sm {
+  height: 2rem;
+  padding: .3rem .75rem;
+  font-size: .85rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+.form-control-lg {
+  height: 3.291667rem;
+  padding: .75rem 1.5rem;
+  font-size: 1.25rem;
+  line-height: 1.333333;
+  border-radius: .3rem;
+}
+
 .form-group {
   margin-bottom: 15px;
 }
@@ -1792,33 +1820,6 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
   cursor: false;
 }
 
-.form-control-static {
-  min-height: 2rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  margin-bottom: 0;
-}
-.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.input-group-addon, .input-group-sm > .input-group-btn > .form-control-static.btn {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.form-control-sm {
-  height: 2rem;
-  padding: .3rem .75rem;
-  font-size: .85rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
-.form-control-lg {
-  height: 3.291667rem;
-  padding: .75rem 1.5rem;
-  font-size: 1.25rem;
-  line-height: 1.333333;
-  border-radius: .3rem;
-}
-
 .has-feedback {
   position: relative;
 }

docs/migration.md

@@ -61,6 +61,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 - Moved element resets to the `_reboot.scss` file.
 - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
 - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
+- Horizontal forms overhauled:
+  - Dropped the `.form-horizontal` class requirement.
+  - `.form-group` no longer mixins the `.row` class, so it's now required for grid layouts.
+  - Added new `.form-control-label` class to vertically center labels with `.form-control`s.
 
 ### Grid system
 

scss/_forms.scss

@@ -111,6 +111,79 @@
 // }
 
 
+// Static form control text
+//
+// Apply class to an element to make any string of text align with labels in a
+// horizontal form layout.
+
+.form-control-static {
+  min-height: ($line-height-computed + $font-size-base);
+  // Size it appropriately next to real form controls
+  padding-top: ($padding-base-vertical + $border-width);
+  padding-bottom: ($padding-base-vertical + $border-width);
+  // Remove default margin from `p`
+  margin-bottom: 0;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.form-control-sm {
+  height: $input-height-sm;
+  padding: $padding-sm-vertical $padding-sm-horizontal;
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  border-radius: $input-border-radius-sm;
+}
+
+.form-control-lg {
+  height: $input-height-lg;
+  padding: $padding-lg-vertical $padding-lg-horizontal;
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+  border-radius: $input-border-radius-lg;
+}
+
+// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
+// .form-group-sm {
+//   @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
+//   .form-control-static {
+//     height: $input-height-sm;
+//     min-height: ($line-height-computed + $font-size-sm);
+//     padding: $padding-sm-vertical $padding-sm-horizontal;
+//     font-size: $font-size-sm;
+//     line-height: $line-height-sm;
+//   }
+// }
+
+// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
+// .form-group-lg {
+//   @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
+//   .form-control-static {
+//     height: $input-height-lg;
+//     min-height: ($line-height-computed + $font-size-lg);
+//     padding: $padding-lg-vertical $padding-lg-horizontal;
+//     font-size: $font-size-lg;
+//     line-height: $line-height-lg;
+//   }
+// }
+
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -206,80 +279,6 @@ input[type="checkbox"] {
 }
 
 
-// Static form control text
-//
-// Apply class to a `p` element to make any string of text align with labels in
-// a horizontal form layout.
-
-.form-control-static {
-  min-height: ($line-height-computed + $font-size-base);
-  // Size it appropriately next to real form controls
-  padding-top: ($padding-base-vertical + 1);
-  padding-bottom: ($padding-base-vertical + 1);
-  // Remove default margin from `p`
-  margin-bottom: 0;
-
-  &.input-lg,
-  &.input-sm {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// The `.form-group-* form-control` variations are sadly duplicated to avoid the
-// issue documented in https://github.com/twbs/bootstrap/issues/15074.
-
-.form-control-sm {
-  height: $input-height-sm;
-  padding: $padding-sm-vertical $padding-sm-horizontal;
-  font-size: $font-size-sm;
-  line-height: $line-height-sm;
-  border-radius: $input-border-radius-sm;
-}
-
-.form-control-lg {
-  height: $input-height-lg;
-  padding: $padding-lg-vertical $padding-lg-horizontal;
-  font-size: $font-size-lg;
-  line-height: $line-height-lg;
-  border-radius: $input-border-radius-lg;
-}
-
-// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
-
-// .form-group-sm {
-//   @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
-
-//   .form-control-static {
-//     height: $input-height-sm;
-//     min-height: ($line-height-computed + $font-size-sm);
-//     padding: $padding-sm-vertical $padding-sm-horizontal;
-//     font-size: $font-size-sm;
-//     line-height: $line-height-sm;
-//   }
-// }
-
-// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
-
-// .form-group-lg {
-//   @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
-
-//   .form-control-static {
-//     height: $input-height-lg;
-//     min-height: ($line-height-computed + $font-size-lg);
-//     padding: $padding-lg-vertical $padding-lg-horizontal;
-//     font-size: $font-size-lg;
-//     line-height: $line-height-lg;
-//   }
-// }
-
-
 // Form control feedback states
 //
 // Apply contextual and semantic states to individual form controls.

scss/mixins/_forms.scss

@@ -55,7 +55,7 @@
 @mixin form-control-focus() {
   &:focus {
     border-color: $input-border-focus;
-    outline: 0;
+    outline: none;
     $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
     @include box-shadow($shadow);
   }