Text Styles

Bootstrap provides many utility classes for styling text without writing custom CSS.

Text Alignment

<p class="text-left">Left aligned text</p>
<p class="text-center">Centre aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text that stretches to fill the full width</p>

Text Transformation

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Text Colors

<p class="text-muted">Muted text (grey)</p>
<p class="text-primary">Primary text (blue)</p>
<p class="text-success">Success text (green)</p>
<p class="text-info">Info text (light blue)</p>
<p class="text-warning">Warning text (orange)</p>
<p class="text-danger">Danger text (red)</p>

Background Colors

<p class="bg-primary">Primary background</p>
<p class="bg-success">Success background</p>
<p class="bg-info">Info background</p>
<p class="bg-warning">Warning background</p>
<p class="bg-danger">Danger background</p>

Headings and Lead

<h1>Heading 1 <small>Secondary text</small></h1>
<p class="lead">This paragraph stands out with larger, lighter text.</p>

Other Text Utilities

<p class="text-nowrap">Text that does not wrap</p>
<abbr title="HyperText Markup Language">HTML</abbr>
<blockquote>
    <p>A famous quote.</p>
    <footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>