Bootstrap Typography

Bootstrap Typography is used to styling and formatting of text content like Page Header, paragraphs, blockquotes, etc. with Bootstrap.

Example of Creating Page Header

<div class="page-header">
  <h1>Bootstrap <small>is front-end framework</small></h1>
</div>

Output

Example of Bootstrap Text Formatting

<p><b>This is bold text</b></p>
<p><big>This is big text</big></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

Output

Example of Text Transformation Classes

<p class="text-lowercase">lowercase</p>
<p class="text-uppercase">uppercase</p>
<p class="text-capitalize">capitalize</p>

Output

Example of Text Emphasis Classes

<p class="text-muted">Muted: This text is grayed out.</p>
<p class="text-primary">Important: Please read the instructions carefully before proceeding.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>

Output

Example of Styling Blockquotes

<blockquote>
  <p>Bootstrap is front-end framework</p>
  <small>by <cite>Albert Einstein</cite></small>
</blockquote>

Output