Use callout without custom Jekyll plugin.

_includes/callout-danger-async-methods.md

@@ -1,7 +1,8 @@
-{% callout danger %}
+{% capture callout %}
 #### Asynchronous methods and transitions
 
 All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
 
 [See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/)
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="danger" %}

_includes/callout-info-mediaqueries-breakpoints.md

@@ -1,3 +1,4 @@
-{% callout info %}
+{% capture callout %}
 Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}

_includes/callout-warning-color-assistive-technologies.md

@@ -1,5 +1,6 @@
-{% callout warning %}
+{% capture callout %}
 ##### Conveying meaning to assistive technologies
 
 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}

_includes/callout.html

@@ -0,0 +1,5 @@
+{% comment %} allowed: info danger warning {% endcomment %}
+{% assign css_class = include.type | default: "info" %}
+<div class="bd-callout bd-callout-{{ css_class }}">
+  {{ include.content | markdownify }}
+</div>

_plugins/callout.rb

@@ -1,28 +0,0 @@
-# Source: https://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
-
-module Jekyll
-  module Tags
-    class CalloutTag < Liquid::Block
-
-      def initialize(tag_name, type, tokens)
-        super
-        type.strip!
-        if %w(info danger warning).include?(type)
-          @type = type
-        else
-          puts "#{type} callout not supported. Defaulting to info"
-          @type = "info"
-        end
-      end
-
-      def render(context)
-        site = context.registers[:site]
-        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-        output = converter.convert(super(context))
-        "<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>"
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('callout', Jekyll::Tags::CalloutTag)

docs/4.0/components/alerts.md

@@ -17,8 +17,7 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 </div>{% endfor %}
 {% endexample %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 ### Link color
 

docs/4.0/components/badge.md

@@ -56,8 +56,7 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 <span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 ## Pill badges
 

docs/4.0/components/button-group.md

@@ -18,13 +18,14 @@ Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript
 </div>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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"`.
 
 In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Button toolbar
 

docs/4.0/components/buttons.md

@@ -18,8 +18,7 @@ Bootstrap includes several predefined button styles, each serving its own semant
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 ## Button tags
 
@@ -94,11 +93,12 @@ Disabled buttons using the `<a>` element behave a bit different:
 <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Button plugin
 

docs/4.0/components/card.md

@@ -392,8 +392,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
 </div>{% endfor %}
 {% endexample %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 ### Border
 

docs/4.0/components/carousel.md

@@ -253,8 +253,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### `.carousel(options)`
 

docs/4.0/components/collapse.md

@@ -176,8 +176,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### `.collapse(options)`
 

docs/4.0/components/dropdowns.md

@@ -591,9 +591,10 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
 
 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
 
-{% callout info %}
+{% capture callout %}
 **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 {% example html %}
 <div class="btn-group">
@@ -736,9 +737,10 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
 
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
 
-{% callout info %}
+{% capture callout %}
 On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Via data attributes
 
@@ -763,11 +765,12 @@ Call the dropdowns via JavaScript:
 $('.dropdown-toggle').dropdown()
 {% endhighlight %}
 
-{% callout info %}
+{% capture callout %}
 ##### `data-toggle="dropdown"` still required
 
 Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Options
 

docs/4.0/components/forms.md

@@ -610,20 +610,22 @@ Custom form controls and selects are also supported.
 </form>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Help text
 
 Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.
 
-{% callout warning %}
+{% capture callout %}
 ##### Associating help text with form controls
 
 Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
 
@@ -683,25 +685,28 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 </form>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### 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 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 %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
-{% callout danger %}
+{% capture callout %}
 #### Cross-browser compatibility
 
 While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="danger" %}
 
 ## Validation
 
 Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
 
-{% callout warning %}
+{% capture callout %}
 We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ### How it works
 

docs/4.0/components/list-group.md

@@ -118,8 +118,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 </div>
 {% endexample %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
 
 ## With badges
 

docs/4.0/components/modal.md

@@ -596,8 +596,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### `.modal(options)`
 

docs/4.0/components/navs.md

@@ -12,9 +12,10 @@ Navigation available in Bootstrap share general markup and styles, from the base
 
 The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
 
-{% callout info %}
+{% capture callout %}
 The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 {% example html %}
 <ul class="nav">
@@ -542,8 +543,7 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### $().tab
 

docs/4.0/components/popovers.md

@@ -95,11 +95,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 
 Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
 
-{% callout danger %}
+{% capture callout %}
 #### Specific markup required for dismiss-on-next-click
 
 For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="danger" %}
 
 {% example html %}
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
@@ -246,16 +247,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   </tbody>
 </table>
 
-{% callout info %}
+{% capture callout %}
 #### Data attributes for individual popovers
 
 Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### `$().popover(options)`
 

docs/4.0/components/scrollspy.md

@@ -256,17 +256,19 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip
 $('body').scrollspy({ target: '#navbar-example' })
 {% endhighlight %}
 
-{% callout danger %}
+{% capture callout %}
 #### Resolvable ID targets required
 
 Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="danger" %}
 
-{% callout info %}
+{% capture callout %}
 #### Non-`:visible` target elements ignored
 
 Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Methods
 

docs/4.0/components/tooltips.md

@@ -90,13 +90,14 @@ $('#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 %}
+{% capture callout %}
 ##### 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.
 
 Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 {% highlight html %}
 <!-- HTML to write -->
@@ -238,16 +239,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   </tbody>
 </table>
 
-{% callout info %}
+{% capture callout %}
 #### Data attributes for individual tooltips
 
 Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
 ### Methods
 
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
 
 #### `$().tooltip(options)`
 

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
 

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.

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
 

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
 

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
 

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
 

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
 

docs/4.0/layout/media-object.md

@@ -22,13 +22,14 @@ Below is an example of a single media object. Only two classes are required—th
 </div>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### Flexbug #12: Inline elements aren't treated as flex items
 
 Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/), as an easy fix.
 
 **Source:** [Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items)
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Nesting
 

docs/4.0/layout/overview.md

@@ -103,8 +103,7 @@ We occasionally use media queries that go in the other direction (the given scre
 // No media query since the extra-large breakpoint has no upper bound on its width
 {% endhighlight %}
 
-{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-info-mediaqueries-breakpoints.md %}
 
 Once again, these media queries are also available via Sass mixins:
 

docs/4.0/utilities/colors.md

@@ -43,11 +43,11 @@ When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` u
 <div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
 {% endexample %}
 
-{% callout info %}
+{% capture callout %}
 #### Dealing with specificity
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}