Dump the type margin overrides in alerts for utils, document that particular example, sidesteps part of #18884

2 files changed, 13 insertions, 9 deletions

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index e27109768..c269c3d8f 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -49,6 +49,19 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 </div>
 {% endexample %}
 
+### Additional content
+
+Alerts can also contain additional HTML elements like headings and paragraphs.
+
+{% example html %}
+<div class="alert alert-success" role="alert">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
+</div>
+{% endexample %}
+
+
 ### Dismissing
 
 Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
diff --git a/scss/_alert.scss b/scss/_alert.scss
index b3dcf0321..55fc101dc 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -7,15 +7,6 @@
   margin-bottom: $spacer-y;
   border: $alert-border-width solid transparent;
   @include border-radius($alert-border-radius);
-
-  // Improve alignment and spacing of inner content
-  > p,
-  > ul {
-    margin-bottom: 0;
-  }
-  > p + p {
-    margin-top: 5px;
-  }
 }
 
 // Headings for larger alerts