Typography · Bootstrap

Bootstrap sets a clean base style for text, and adds classes for everything else.

Headings

HTML + Bootstrap

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<p class="h4">A paragraph styled like an h4</p>
<h2>Main title <small class="text-body-secondary">with a quieter subtitle</small></h2>

The classes .h1 to .h6 give any element a heading's look without changing its meaning, which helps when the visual size you want doesn't match the right heading level.

Display headings and lead text

HTML + Bootstrap

<h1 class="display-4 fw-bold">Learn to code</h1>
<p class="lead">A lead paragraph stands out from the body text: use it for the opening line of a page.</p>
<p>And this is ordinary body text for comparison.</p>

display-1 to display-6 are larger, lighter headings for heroes and landing pages.

Size, weight and style

HTML + Bootstrap

<p class="fs-2">fs-2: a larger font size</p>
<p class="fs-6">fs-6: a smaller one</p>
<p class="fw-bold">fw-bold</p>
<p class="fw-semibold">fw-semibold</p>
<p class="fw-light">fw-light</p>
<p class="fst-italic">fst-italic</p>
<p class="text-decoration-underline">text-decoration-underline</p>
<p class="text-uppercase">text-uppercase</p>
<p class="font-monospace">font-monospace</p>

Alignment and colour

HTML + Bootstrap

<p class="text-start">text-start</p>
<p class="text-center">text-center</p>
<p class="text-end">text-end</p>
<p class="text-center text-md-start">centred on phones, left-aligned from md</p>
<p class="text-body-secondary">text-body-secondary: for less important text</p>

Lists

HTML + Bootstrap

<ul class="list-unstyled">
  <li>✔ No bullets</li>
  <li>✔ No indent</li>
</ul>
<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">Courses</li>
  <li class="list-inline-item">About</li>
</ul>
<ol class="list-group list-group-numbered" style="max-width: 18rem">
  <li class="list-group-item">Variables</li>
  <li class="list-group-item">Loops</li>
  <li class="list-group-item">Functions</li>
</ol>

list-unstyled removes bullets and indentation, list-inline puts items on one line, and a list group makes a tidy bordered list.

Quotes and inline elements

HTML + Bootstrap

<figure>
  <blockquote class="blockquote">
    <p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Harold Abelson, in <cite>Structure and Interpretation of Computer Programs</cite></figcaption>
</figure>

<p>Use <mark>mark</mark> to highlight, <code>code</code> for code, and <kbd>Ctrl</kbd> + <kbd>S</kbd> for keys.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the structure of a page.</p>