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><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></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"> +<p class="text-left">Left aligned text.</p> +<p class="text-center">Center aligned text.</p> +<p class="text-right">Right aligned text.</p> +</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><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></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"> +<p class="text-left">Left aligned text.</p> +<p class="text-center">Center aligned text.</p> +<p class="text-right">Right aligned text.</p> +</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 // -------------------------