Typography
Heading | Example |
---|---|
|
h1 heading |
|
h2 heading |
|
h3 heading |
|
h4 heading |
|
h5 heading |
|
h6 heading |
<h1>Heading text</h1>
<h2>Heading text</h2>
<h3>Heading text</h3>
<h4>Heading text</h4>
<h5>Heading text</h5>
<h6>Heading text</h6>
Fancy display heading With faded secondary text
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
This is a lead paragraph. It stands out from regular paragraphs.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Sometimes a splash of color is nice.
<h6 class="orange-text text-uppercase">
This text will be orage and uppercase.
</h6>
This text will be extra small
<p class="extra-small">
This text will be extra small
</p>
Naming a Source (and Blockquotes)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tellus scelerisque, tincidunt sapien vitae, commodo purus. Phasellus at efficitur diam, et pretium arcu.
A well-known quote, contained in a blockquote element.
Nulla molestie, augue non semper sodales, nisl sem euismod dui, in rhoncus dui ante sit amet nibh. Aenean eget sapien nisi. Vivamus aliquam pharetra purus quis auctor. Aenean sit amet cursus mauris. Vivamus a interdum nisl, sit amet tempus enim.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<div class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></div>
Blockquote Alignment
Use text utilities as needed to change the alignment of your blockquote.
Center
A well-known quote, contained in a blockquote element.
<div class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<div class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></div>
</div>
Right
A well-known quote, contained in a blockquote element.
<div class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<div class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></div>
</div>