Move from h4s and misc to h5s so headings from example snippets don't show in our...

diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md
index f08d2e3ecd260ea98c4699d675bebdc404b3187e..b771e0da0364396e264b9a42b884239e4724eb57 100644 (file)
--- a/docs/4.0/components/button-group.md
+++ b/docs/4.0/components/button-group.md
@@ -19,7 +19,7 @@ Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript
 {% endexample %}
 
 {% callout warning %}
-#### Ensure correct `role` and provide a label
+##### Ensure correct `role` and provide a label
 
 In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
 

diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md
index b912ec89b2893c8dabab8ac8a5c6453328ab11fa..02feb1cb291e2e6996f0876da7e5c6649eab2df2 100644 (file)
--- a/docs/4.0/components/buttons.md
+++ b/docs/4.0/components/buttons.md
@@ -95,7 +95,7 @@ Disabled buttons using the `<a>` element behave a bit different:
 {% endexample %}
 
 {% callout warning %}
-#### Link functionality caveat
+##### Link functionality caveat
 
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
 {% endcallout %}

diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index 0971e90c979ab3430f011c1205251aaf4d304c6c..672892be2228743293a73e9acd1489637015be64 100644 (file)
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -20,7 +20,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
 <div class="card" style="width: 18rem;">
   <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -52,7 +52,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 {% example html %}
 <div class="card" style="width: 18rem;">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="card-link">Card link</a>
@@ -109,7 +109,7 @@ Mix and match multiple content types to create the card you need, or throw every
 <div class="card" style="width: 18rem;">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
   <ul class="list-group list-group-flush">
@@ -134,7 +134,7 @@ Add an optional header and/or footer within a card.
     Featured
   </div>
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -145,9 +145,9 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 
 {% example html %}
 <div class="card">
-  <h4 class="card-header">Featured</h4>
+  <h5 class="card-header">Featured</h5>
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -174,7 +174,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
     Featured
   </div>
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -197,7 +197,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Special title treatment</h4>
+        <h5 class="card-title">Special title treatment</h5>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -206,7 +206,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Special title treatment</h4>
+        <h5 class="card-title">Special title treatment</h5>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -222,7 +222,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 {% example html %}
 <div class="card w-75">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -230,7 +230,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 
 <div class="card w-50">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -244,7 +244,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 {% example html %}
 <div class="card" style="width: 18rem;">
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -258,7 +258,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
 {% example html %}
 <div class="card" style="width: 18rem;">
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -266,7 +266,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
 
 <div class="card text-center" style="width: 18rem;">
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -274,7 +274,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
 
 <div class="card text-right" style="width: 18rem;">
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -301,7 +301,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
     </ul>
   </div>
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -324,7 +324,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
     </ul>
   </div>
   <div class="card-body">
-    <h4 class="card-title">Special title treatment</h4>
+    <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -343,14 +343,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 <div class="card mb-3">
   <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
 </div>
 <div class="card">
   <div class="card-body">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
@@ -366,7 +366,7 @@ Turn an image into a card background and overlay your card's text. Depending on
 <div class="card bg-dark text-white">
   <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
   <div class="card-img-overlay">
-    <h4 class="card-title">Card title</h4>
+    <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text">Last updated 3 mins ago</p>
   </div>
@@ -386,7 +386,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
 <div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
   <div class="card-body">
-    <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
+    <h5 class="card-title">{{ color.name | capitalize }} card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>{% endfor %}
@@ -404,7 +404,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
 <div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
   <div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
-    <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
+    <h5 class="card-title">{{ color.name | capitalize }} card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>{% endfor %}
@@ -418,7 +418,7 @@ You can also change the borders on the card header and footer as needed, and eve
 <div class="card border-success mb-3" style="max-width: 18rem;">
   <div class="card-header bg-transparent border-success">Header</div>
   <div class="card-body text-success">
-    <h4 class="card-title">Success card title</h4>
+    <h5 class="card-title">Success card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
   <div class="card-footer bg-transparent border-success">Footer</div>
@@ -438,7 +438,7 @@ Use card groups to render cards as a single, attached element with equal width a
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -446,7 +446,7 @@ Use card groups to render cards as a single, attached element with equal width a
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -454,7 +454,7 @@ Use card groups to render cards as a single, attached element with equal width a
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -469,7 +469,7 @@ When using card groups with footers, their content will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     </div>
     <div class="card-footer">
@@ -479,7 +479,7 @@ When using card groups with footers, their content will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     </div>
     <div class="card-footer">
@@ -489,7 +489,7 @@ When using card groups with footers, their content will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
     </div>
     <div class="card-footer">
@@ -508,7 +508,7 @@ Need a set of equal width and height cards that aren't attached to one another?
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -516,7 +516,7 @@ Need a set of equal width and height cards that aren't attached to one another?
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -524,7 +524,7 @@ Need a set of equal width and height cards that aren't attached to one another?
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -539,7 +539,7 @@ Just like with card groups, card footers in decks will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     </div>
     <div class="card-footer">
@@ -549,7 +549,7 @@ Just like with card groups, card footers in decks will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     </div>
     <div class="card-footer">
@@ -559,7 +559,7 @@ Just like with card groups, card footers in decks will automatically line up.
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
     </div>
     <div class="card-footer">
@@ -580,7 +580,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title that wraps to a new line</h4>
+      <h5 class="card-title">Card title that wraps to a new line</h5>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     </div>
   </div>
@@ -597,7 +597,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
   <div class="card">
     <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -614,7 +614,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
   </div>
   <div class="card text-center">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
@@ -634,7 +634,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
   </div>
   <div class="card">
     <div class="card-body">
-      <h4 class="card-title">Card title</h4>
+      <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>

diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md
index 570594db2f07db5665b4df2eb7ba40751c3877dc..3435ba07fe16b2730df2b6d535b485e53e1d03d6 100644 (file)
--- a/docs/4.0/components/carousel.md
+++ b/docs/4.0/components/carousel.md
@@ -104,7 +104,7 @@ You can also add the indicators to the carousel, alongside the controls, too.
 {% endexample %}
 
 {% callout warning %}
-#### Initial active element required
+##### Initial active element required
 
 The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
 {% endcallout %}
@@ -124,21 +124,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       <div class="carousel-item active">
         <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
         <div class="carousel-caption d-none d-md-block">
-          <h3>First slide label</h3>
+          <h5>First slide label</h5>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
       <div class="carousel-item">
         <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
         <div class="carousel-caption d-none d-md-block">
-          <h3>Second slide label</h3>
+          <h5>Second slide label</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
       <div class="carousel-item">
         <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
         <div class="carousel-caption d-none d-md-block">
-          <h3>Third slide label</h3>
+          <h5>Third slide label</h5>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
         </div>
       </div>
@@ -158,7 +158,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
 <div class="carousel-item">
   <img src="..." alt="...">
   <div class="carousel-caption d-none d-md-block">
-    <h3>...</h3>
+    <h5>...</h5>
     <p>...</p>
   </div>
 </div>

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 6ed98c3b76d671852c883080872b1032f101ab1d..23350415a5a9a47655683aa3675a3d1c56bf5db9 100644 (file)
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -611,7 +611,7 @@ Custom form controls and selects are also supported.
 {% endexample %}
 
 {% callout warning %}
-#### Alternatives to hidden labels
+##### Alternatives to hidden labels
 Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
 {% endcallout %}
 
@@ -684,7 +684,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 {% endexample %}
 
 {% callout warning %}
-#### Caveat with anchors
+##### Caveat with anchors
 
 By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
 {% endcallout %}

diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md
index d0ef7018354790ff86873cb1c4313471c54ef9ba..e062138a0066c78cf575559f25ad041c35709041 100644 (file)
--- a/docs/4.0/components/tooltips.md
+++ b/docs/4.0/components/tooltips.md
@@ -124,7 +124,7 @@ $('#example').tooltip(options)
 The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
 
 {% callout warning %}
-#### Making tooltips work for keyboard and assistive technology users
+##### Making tooltips work for keyboard and assistive technology users
 
 You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
 {% endcallout %}

diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 5c8e194708dd0d99d93862bcb295e8b9fcdc1668..066a85235adca560accbadbf98a122257229f102 100644 (file)
--- a/docs/4.0/content/images.md
+++ b/docs/4.0/content/images.md
@@ -19,7 +19,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 {% endhighlight %}
 
 {% callout warning %}
-#### SVG images and IE 10
+##### SVG images and IE 10
 
 In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
 {% endcallout %}

diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index d90877fee71104b2dad9699875d85839523f592f..d89e73da7daaa299e3cd428154a870bfa1923262 100644 (file)
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -342,7 +342,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 {% endhighlight %}
 
 {% callout warning %}
-#### jQuery incompatibility
+##### jQuery incompatibility
 
 `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
 {% endcallout %}

diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md
index ed2d18bf9ca865d4d12d1aaa48431c5711bb65d5..72d1e14ecd5194ca1891acb3bf5ed382e843241a 100644 (file)
--- a/docs/4.0/getting-started/javascript.md
+++ b/docs/4.0/getting-started/javascript.md
@@ -115,7 +115,7 @@ $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
 Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
 
 {% callout warning %}
-#### Third-party libraries
+##### Third-party libraries
 
 **Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
 {% endcallout %}