From: Mark Otto <markdotto@gmail.com>
Date: Fri, 23 Dec 2016 00:44:33 +0000 (-0800)
Subject: update alignment section with widths
X-Git-Tag: v4.0.0-alpha.6~235^2~13
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=3f5c0a884a44983629659d3748d9d485ac7b3472;p=thirdparty%2Fbootstrap.git

update alignment section with widths
---

diff --git a/docs/components/card.md b/docs/components/card.md
index 56d20ac456..1bfe4ff746 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -242,6 +242,35 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 </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]({{ site.baseurl }}/utilities/typography/#text-alignment).
+
+{% example html %}
+<div class="card" style="width: 20rem;">
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <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="card text-center" style="width: 20rem;">
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <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="card text-right" style="width: 20rem;">
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <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>
+{% endexample %}
 {% example html %}
 <div class="card text-center">
   <div class="card-header">