Use callout without custom Jekyll plugin.

3 files changed, 11 insertions, 10 deletions

diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 066a85235..49576da9d 100644
--- a/docs/4.0/content/images.md
+++ b/docs/4.0/content/images.md
@@ -18,11 +18,12 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 <img src="..." class="img-fluid" alt="Responsive image">
 {% endhighlight %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Image thumbnails
 
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index cb522e50a..61d0fedd6 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -354,10 +354,11 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 <input type="text" hidden>
 {% endhighlight %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index cfacb3c79..8be2ba252 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -620,13 +620,11 @@ Regular table background variants are not available with the dark table, however
 </tr>
 {% endhighlight %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
 
-{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-info-mediaqueries-breakpoints.md %}
 
 ## Captions
 
@@ -670,11 +668,12 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
 
 Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
 
-{% callout warning %}
+{% capture callout %}
 ##### Vertical clipping/truncation
 
 Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ### Always responsive