0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

Add text alignment utility classes

This commit is contained in:
Mark Otto 2013-01-09 18:56:08 -08:00
parent 3d04d9ba75
commit 91dd77939b
4 changed files with 42 additions and 0 deletions

View File

@ -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,

View File

@ -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">

View File

@ -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">

View File

@ -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
// -------------------------