From 8217499640190e8eb72aa7214525faec3238b04a Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 6 Feb 2019 11:13:55 +0200
Subject: [PATCH] carousel.md: Highlight the whole example for consistency.

---
 site/docs/4.2/components/carousel.md | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/site/docs/4.2/components/carousel.md b/site/docs/4.2/components/carousel.md
index 26c81b48d6..dbe321cd9d 100644
--- a/site/docs/4.2/components/carousel.md
+++ b/site/docs/4.2/components/carousel.md
@@ -112,6 +112,7 @@ You can also add the indicators to the carousel, alongside the controls, too.
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
 
+{% capture example %}
 <div class="bd-example">
   <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
@@ -152,16 +153,8 @@ Add captions to your slides easily with the `.carousel-caption` element within a
     </a>
   </div>
 </div>
-
-{% highlight html %}
-<div class="carousel-item">
-  <img src="..." alt="...">
-  <div class="carousel-caption d-none d-md-block">
-    <h5>...</h5>
-    <p>...</p>
-  </div>
-</div>
-{% endhighlight %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Crossfade