From: Andres Galante <agalante@gmail.com>
Date: Tue, 3 Oct 2017 23:59:39 +0000 (-0700)
Subject: #24176 adds a note on the image docs about how to use picture
X-Git-Tag: v4.0.0-beta.2~106
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f2725a6721f222b084ab96059555ccf3c9fd3464;p=thirdparty%2Fbootstrap.git

#24176 adds a note on the image docs about how to use picture
---

diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md
index 0bcbe3a039..4601dcc6db 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 %}