Use callout without custom Jekyll plugin.

4 files changed, 15 insertions, 10 deletions

diff --git a/docs/4.0/getting-started/best-practices.md b/docs/4.0/getting-started/best-practices.md
index feb751cab..1e7af39ee 100644
--- a/docs/4.0/getting-started/best-practices.md
+++ b/docs/4.0/getting-started/best-practices.md
@@ -7,9 +7,10 @@ group: getting-started
 
 We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.
 
-{% callout info %}
+{% capture callout %}
 **Heads up!** This copy is a work in progress.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### General outline
 
diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md
index 0c1eb5f39..da7011e76 100644
--- a/docs/4.0/getting-started/javascript.md
+++ b/docs/4.0/getting-started/javascript.md
@@ -32,10 +32,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
 $(document).off('.alert.data-api')
 {% endhighlight %}
 
-{% callout warning %}
+{% capture callout %}
 ##### Escaping selectors
 If you use special selectors, for example: `collapse:Example`, be sure to escape them, because they'll be passed through jQuery.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Events
 
@@ -119,11 +120,12 @@ $.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 %}
+{% capture callout %}
 ##### 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Util
 
diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index c4613b04b..3c3a85826 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -272,9 +272,10 @@ Here's how you can use these in your Sass:
 
 [Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`.
 
-{% callout info %}
+{% capture callout %}
 In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Theme colors
 
diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md
index f1b79294d..e8a57cf96 100644
--- a/docs/4.0/getting-started/webpack.md
+++ b/docs/4.0/getting-started/webpack.md
@@ -30,9 +30,10 @@ Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://pop
 these are defined as `peerDependencies`, this means that you will have to make sure to add both of them
 to your `package.json` using `npm install --save jquery popper.js`.
 
-{% callout warning %}
+{% capture callout %}
 Notice that if you chose to **import plugins individually**, you must also install [exports-loader](https://github.com/webpack-contrib/exports-loader)
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Importing Styles