Bootstrap Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

lighter

secondary text in any heading with a generic <small> tag or the .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to <mark>highlight</mark> text.

Deleted text

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

<s>This line of text is meant to be treated as no longer accurate.</s>

Underlined text

To underline text use the <u> tag.

<u>This line of text will render as underlined</u>

Alignment classes

Easily realign text to components with text alignment classes.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

Transform text in components with text capitalization classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

<address>
  <strong>Company Name</strong><br>
  Company address<br>
  City, zip code<br>
  <abbr title="Phone">P:</abbr> 123 456 78910
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">name@company.com</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

© getbootstrap.com/