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

add aligned footer example
---

diff --git a/docs/components/card.md b/docs/components/card.md
index 77f41ca576..6fa30a9f6d 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -528,6 +528,40 @@ Use card groups to render cards as a single, attached element with equal width a
 
 When using card groups with footers, their content will automatically line up.
 
+{% example html %}
+<div class="card-group">
+  <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.