Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

1 files changed, 14 insertions, 2 deletions

diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug
index 05cd719..3cd4c2c 100644
--- a/docs/src/elements/media.pug
+++ b/docs/src/elements/media.pug
@@ -17,10 +17,15 @@ block docs-content
     p
       | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
 
-    .columns
+    .docs-demo.columns
       .column.col-12
         img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+
     p
       | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
       | This feature can replace the classic background image trick. Microsoft Edge support 
@@ -40,7 +45,6 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
@@ -59,6 +63,14 @@ block docs-content
           img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
           figcaption.figure-caption.text-center macOS Yosemite wallpaper
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="figure">
+            <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+            <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+          </figure>
+
     +docs-subheading('media-video', 'Video')
 
     p