From: Mark Otto <markdotto@gmail.com>
Date: Fri, 23 Dec 2016 00:47:10 +0000 (-0800)
Subject: card deck footer example
X-Git-Tag: v4.0.0-alpha.6~235^2~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ce35655f5fbea77745b5f9ca76c390e6abb9711c;p=thirdparty%2Fbootstrap.git

card deck footer example
---

diff --git a/docs/components/card.md b/docs/components/card.md
index 6fa30a9f6d..c963054098 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -563,7 +563,9 @@ When using card groups with footers, their content will automatically line up.
 </div>
 {% endexample %}
 
-Only applies to small devices and above.
+### Card decks
+
+Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
 
 {% example html %}
 <div class="card-deck">
@@ -595,8 +597,43 @@ Only applies to small devices and above.
 {% endexample %}
 
 ## Columns
+Just like with card groups, card footers in decks will automatically line up.
 
 Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
+{% example html %}
+<div class="card-deck">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+  </div>
+</div>
+{% endexample %}
 
 Only applies to small devices and above.