From: Mark Otto <markdotto@gmail.com>
Date: Thu, 23 Apr 2015 08:33:19 +0000 (-0700)
Subject: add card grid sizing
X-Git-Tag: v4.0.0-alpha~252
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fe6756485fea6bbe3ff3f9198b72bdbf9fbde8b5;p=thirdparty%2Fbootstrap.git

add card grid sizing
---

diff --git a/docs/components/card.md b/docs/components/card.md
index d8a356f6a6..715c5eb3e5 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -19,6 +19,37 @@ Cards require very little markup, but do require some additional classes to give
 </div>
 {% endexample %}
 
+### Sizing
+
+Cards are block-leve by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <h3 class="card-title">Special title treatment</h3>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="row">
+  <div class="col-sm-6">
+    <div class="card">
+      <h3 class="card-title">Special title treatment</h3>
+      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="card">
+      <h3 class="card-title">Special title treatment</h3>
+      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
 ### Text alignment
 
 You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]().