Update static form control

- Remove margin-bottom override in favor of .mb-0 utility class
- Apply the input line-height styles to match
- Remove the min-height to match the input

diff --git a/docs/components/forms.md b/docs/components/forms.md
index c7da5c0fd1d43e403da825493b784fcdfb80adf5..a2d59d920838537e89931594d05934b9831573bc 100644 (file)
--- a/docs/components/forms.md
+++ b/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@example.com</p>
+      <p class="form-control-static mb-0">email@example.com</p>
     </div>
   </div>
   <div class="form-group row">

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 5f5b26146c1bc1369a0a057b57f7ce58eba6c44e..2023aa0134b26a36302865eb7b50571115cb439b 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -132,12 +132,10 @@ 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;
 
   &.form-control-sm,
   &.form-control-lg {