Add text alignment utility classes

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fcc8a8c10760de52b26f4171910225608172ab9d..3f7434cbdd768eb9ef0a432fd230859a693fc62b 100644 (file)
--- 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 53cd678d03e80d47730106b90d10bc6b3a3d7a20..64527c34feb234e0f5dbea7bd0e1e04db53f9230 100644 (file)
--- 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 47abef021d6d0eda183807e40d33c2a63960c71f..800dd2ff354652b053b1e43b04d9c9aa4125914f 100644 (file)
--- 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 3aac597bd21f1475690224dc709f1d22c4a93cd9..a1789fd79f3c56d9fb24b7ce60968081e89cbd73 100644 (file)
--- 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
 // -------------------------