Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

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"`.
 

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 %}

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>

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>

docs/4.0/components/forms.md

@@ -249,7 +249,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
 
 ### Form groups
 
-The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
+The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.
 
 {% example html %}
 <form>
@@ -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 %}

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 %}

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 %}

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 %}

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 %}

scss/bootstrap.scss

@@ -9,7 +9,6 @@
 @import "variables";
 @import "mixins";
 @import "root";
-@import "print";
 @import "reboot";
 @import "type";
 @import "images";
@@ -40,3 +39,4 @@
 @import "popover";
 @import "carousel";
 @import "utilities";
+@import "print";