From f2725a6721f222b084ab96059555ccf3c9fd3464 Mon Sep 17 00:00:00 2001
From: Andres Galante <agalante@gmail.com>
Date: Tue, 3 Oct 2017 16:59:39 -0700
Subject: [PATCH] #24176 adds a note on the image docs about how to use picture

---
 docs/4.0/content/images.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 0bcbe3a03..4601dcc6d 100644
--- a/docs/4.0/content/images.md
+++ b/docs/4.0/content/images.md
@@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
   <img src="..." class="rounded" alt="...">
 </div>
 {% endhighlight %}
+
+
+## Picture
+
+If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
+
+{% highlight html %}
+​<picture>
+ <source srcset="..." type="image/svg+xml">
+ <img src="..."  class="img-fluid img-thumbnail" alt="...">
+</picture>
+{% endhighlight %}