Merge pull request #20869 from twbs/static-control

v4 Static form control sizing

Author: mdo

docs/components/forms.md

@@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 
 ## Static controls
 
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
 
 {% example html %}
 <form>
   <div class="form-group row">
     <label class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
-      <p class="form-control-static">[email protected]</p>
+      <p class="form-control-static mb-0">[email protected]</p>
     </div>
   </div>
   <div class="form-group row">

scss/_forms.scss

@@ -132,12 +132,11 @@ select.form-control {
 // horizontal form layout.
 
 .form-control-static {
-  min-height: $input-height;
-  // Size it appropriately next to real form controls
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
-  // Remove default margin from `p`
-  margin-bottom: 0;
+  line-height: $input-line-height;
+  border: solid transparent;
+  border-width: 1px 0;
 
   &.form-control-sm,
   &.form-control-lg {