Typography

Bootstrap's typography includes global settings, headings, body text, lists, inline text elements, and responsive text utilities.

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
							<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>

Display Headings

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
							<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Lead & Inline Elements

Lead paragraph — makes a paragraph stand out.

You can use the mark tag to highlight text.

This line of text is meant to be deleted.

This line is treated as no longer accurate.

This line is an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text. 

								<p class="lead">Lead paragraph</p>
<mark>highlighted</mark>
<del>deleted text</del>
<ins>inserted text</ins>
<u>underlined</u>
<small>fine print</small>
<strong>bold</strong>
<em>italic</em>

Text Utilities

Start aligned text.

Center aligned text.

End aligned text.

Uppercased text.

Lowercased text.

capitalized text.

Bold text.

Semibold text.

Normal weight text.

Italic text.

Underlined text.

Strikethrough text.

								<p class="text-start">...</p>
<p class="text-center">...</p>
<p class="text-end">...</p>
<p class="text-uppercase">...</p>
<p class="text-lowercase">...</p>
<p class="text-capitalize">...</p>
<p class="fw-bold">...</p>
<p class="fst-italic">...</p>

Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-muted

.text-dark

								<p class="text-primary">...</p>
<p class="text-secondary">...</p>
<p class="text-success">...</p>
<p class="text-danger">...</p>
<p class="text-warning">...</p>
<p class="text-info">...</p>
<p class="text-muted">...</p>

Lists

Unstyled

  • Lorem ipsum
  • Consectetur
  • Adipiscing

Inline

  • Lorem
  • ·
  • Phasellus
  • ·
  • Nulla

Blockquote

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
								<figure>
  <blockquote class="blockquote">
    <p>A quote here.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in
    <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>