add basic figure support

dist/css/bootstrap-flex.css

@@ -667,7 +667,17 @@ mark,
   content: "\00A0 \2014";
 }
 
-.img-responsive, .carousel-inner > .carousel-item > img,
+.figure > img {
+  margin-bottom: .5rem; 
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91;
+}
+
+.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
   display: block;
   max-width: 100%;

dist/css/bootstrap.css

@@ -667,7 +667,17 @@ mark,
   content: "\00A0 \2014";
 }
 
-.img-responsive, .carousel-inner > .carousel-item > img,
+.figure > img {
+  margin-bottom: .5rem; 
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91;
+}
+
+.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
   display: block;
   max-width: 100%;

docs/components/images.md

@@ -78,3 +78,14 @@ Align images with the [helper float classes](/components/helpers) or [text align
   <img src="..." class="img-rounded" alt="...">
 </div>
 {% endhighlight %}
+
+## Figures
+
+Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
+
+{% example html %}
+<figure class="figure">
+  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <figcaption class="figure-caption">A caption for the above image.</figcaption>
+</figure>
+{% endexample %}

docs/dist/css/bootstrap-flex.css

@@ -667,7 +667,17 @@ mark,
   content: "\00A0 \2014";
 }
 
-.img-responsive, .carousel-inner > .carousel-item > img,
+.figure > img {
+  margin-bottom: .5rem; 
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91;
+}
+
+.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
   display: block;
   max-width: 100%;

docs/dist/css/bootstrap.css

@@ -667,7 +667,17 @@ mark,
   content: "\00A0 \2014";
 }
 
-.img-responsive, .carousel-inner > .carousel-item > img,
+.figure > img {
+  margin-bottom: .5rem; 
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91;
+}
+
+.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
   display: block;
   max-width: 100%;

scss/_type.scss

@@ -187,3 +187,20 @@ mark,
     }
   }
 }
+
+//
+// Figures
+//
+
+.figure {
+  > img {
+    @extend .img-responsive;
+    line-height: 1;
+    margin-bottom: ($spacer-y / 2);
+  }
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: $gray-light;
+}