From 91dd77939b4183fa86973056778ad87950674410 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 9 Jan 2013 18:56:08 -0800
Subject: [PATCH] Add text alignment utility classes

---
 docs/assets/css/bootstrap.css     | 12 ++++++++++++
 docs/css.html                     | 13 +++++++++++++
 docs/templates/pages/css.mustache | 13 +++++++++++++
 less/type.less                    |  4 ++++
 4 files changed, 42 insertions(+)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fcc8a8c107..3f7434cbdd 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -510,6 +510,18 @@ a.text-success:hover {
   color: #356635;
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
 h1,
 h2,
 h3,
diff --git a/docs/css.html b/docs/css.html
index 53cd678d03..64527c34fe 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -305,6 +305,19 @@
 
           <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
+          <h3>Alignment classes</h3>
+          <p>Easily realign text to components with text alignment classes.</p>
+          <div class="bs-docs-example">
+            <p class="text-left">Left aligned text.</p>
+            <p class="text-center">Center aligned text.</p>
+            <p class="text-right">Right aligned text.</p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
+&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
+&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
+</pre>
+
           <h3>Emphasis classes</h3>
           <p>Convey meaning through color with a handful of emphasis utility classes.</p>
           <div class="bs-docs-example">
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 47abef021d..800dd2ff35 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -242,6 +242,19 @@
 
           <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
+          <h3>Alignment classes</h3>
+          <p>Easily realign text to components with text alignment classes.</p>
+          <div class="bs-docs-example">
+            <p class="text-left">Left aligned text.</p>
+            <p class="text-center">Center aligned text.</p>
+            <p class="text-right">Right aligned text.</p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
+&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
+&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
+</pre>
+
           <h3>Emphasis classes</h3>
           <p>Convey meaning through color with a handful of emphasis utility classes.</p>
           <div class="bs-docs-example">
diff --git a/less/type.less b/less/type.less
index 3aac597bd2..a1789fd79f 100644
--- a/less/type.less
+++ b/less/type.less
@@ -40,6 +40,10 @@ a.text-error:hover   { color: darken(@state-error-text, 10%); }
 .text-success        { color: @state-success-text; }
 a.text-success:hover { color: darken(@state-success-text, 10%); }
 
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
 
 // Headings
 // -------------------------