Fixes #18492: Document .h1-.h6, change docs mention of inline usage to varying elements

diff --git a/docs/content/typography.md b/docs/content/typography.md
index a49eadedb9a737873f834f75f81e9f4d28de20c8..139a7e00ed0c58f22f53fd852f0484e23d96b404 100644 (file)
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -24,7 +24,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de
 
 ## Headings
 
-All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
+All HTML headings, `<h1>` through `<h6>`, are available.
 
 <div class="bd-example bd-example-type">
   <table class="table">
@@ -66,6 +66,17 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
 <h6>h6. Bootstrap heading</h6>
 {% endhighlight %}
 
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{% example html %}
+<p class="h1">h1. Bootstrap heading</p>
+<p class="h2">h2. Bootstrap heading</p>
+<p class="h3">h3. Bootstrap heading</p>
+<p class="h4">h4. Bootstrap heading</p>
+<p class="h5">h5. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p>
+{% endexample %}
+
 ### Customizing headings
 
 Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.