Bootstrap Typography and Colors

Text is most of what people read on a website, so Bootstrap typography gives you a sensible starting point and many small classes to adjust it. In this lesson you will learn the default type styles, the classes that change size, weight and alignment, and Bootstrap’s theme colours for text and backgrounds.

Default text styles from Reboot

As soon as you add the Bootstrap CSS, a set of base styles called Reboot takes effect. It uses the operating system’s own font (a “system font stack”), sets the body text to 1rem (16px by default) with a line height of 1.5, removes the top margin from headings and paragraphs, and keeps a bottom margin for spacing. These choices make plain HTML readable before you add a single class.

Headings <h1> to <h6> get sizes that scale down on small screens. If you need a heading that looks different from its level, use the classes h1 to h6. For example, <h2 class="h4"> keeps the correct document outline for screen readers and search engines while looking smaller.

Bootstrap sizes text in rem units, which are relative to the root font size. If a reader increases the default font size in their browser settings, all Bootstrap text grows with it. This is one reason not to override the body size with a fixed pixel value. The large headings and display-* classes also use a feature called responsive font sizes (RFS): they shrink smoothly on narrow screens so a big hero title does not break onto five lines on a phone. Read CSS Units for more on rem.

Bootstrap typography classes for size, weight and style

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap typography</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
  <p class="text-uppercase fw-semibold small text-body-secondary mb-1">Travel guide</p>
  <h1 class="display-5">Mahabalipuram</h1>
  <p class="lead">Shore temples, rock-cut caves and a long beach, about an hour from Chennai.</p>
  <p>The <mark>Shore Temple</mark> faces the Bay of Bengal. Visit early morning for soft light and fewer crowds.</p>

  <h2 class="h4 mt-4">Headings that look smaller</h2>
  <p class="fs-5 fw-light">This paragraph uses <code>fs-5</code> and <code>fw-light</code>.</p>
  <p class="fst-italic lh-lg">Italic text with a larger line height is easier to read in long quotes.</p>

  <div class="border rounded p-2" style="max-width: 260px;">
    <p class="text-truncate mb-0">Arjuna's Penance is a huge open-air rock relief carved in the 7th century.</p>
  </div>

  <figure class="mt-4">
    <blockquote class="blockquote">
      <p>Travel slowly, and the place will tell you its story.</p>
    </blockquote>
    <figcaption class="blockquote-footer">From a travel diary</figcaption>
  </figure>
</div>
</body>
</html>

Notice that the small label at the top combines three utilities: uppercase, semi-bold and a muted colour. Most Bootstrap typography comes from small combinations like this rather than from special components.

Theme colours

Bootstrap has eight theme colours with meaningful names: primary, secondary, success, danger, warning, info, light and dark. Because the names describe a purpose, not a shade, you can change the actual colours later (lesson 12) without editing your HTML.

• text-primary, text-danger and so on set the text colour.
• bg-success, bg-warning and so on set the background colour.
• text-bg-primary sets a background and a readable text colour that contrasts with it. Prefer this over pairing bg-* and text-* by hand.
• bg-primary-subtle with text-primary-emphasis gives a soft tinted background with darker text, good for status labels.
• text-body-secondary and text-body-tertiary give muted grey text that also works in dark mode.
• text-opacity-50 or bg-opacity-25 make a colour partly transparent.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text and background colours</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
  <p class="text-primary">Primary text</p>
  <p class="text-success">Success text: your seat is booked.</p>
  <p class="text-danger">Danger text: payment failed.</p>
  <p class="text-body-secondary">Muted text for less important details.</p>

  <div class="p-3 mb-2 text-bg-primary rounded">text-bg-primary</div>
  <div class="p-3 mb-2 text-bg-warning rounded">text-bg-warning (dark text chosen for contrast)</div>
  <div class="p-3 mb-2 text-bg-dark rounded">text-bg-dark</div>

  <div class="p-3 mb-2 bg-success-subtle text-success-emphasis border border-success-subtle rounded">
    Order #1042 has been delivered to Tiruchirappalli.
  </div>
  <div class="p-3 bg-danger-subtle text-danger-emphasis border border-danger-subtle rounded">
    Two items in your cart are out of stock.
  </div>

  <p class="mt-3">Links can use colours too: <a href="#" class="link-success">a success link</a> and <a href="#" class="link-danger">a danger link</a>.</p>
</div>
</body>
</html>

Colour and accessibility

Colour helps people scan a page, but it must never be the only way you communicate meaning. Many people have some form of colour vision deficiency, and screen readers do not announce colours at all. A red message should also say “Error” or use an icon, and a green one should say what succeeded.

Check contrast too. Light text on bg-warning or bg-info is hard to read, which is exactly why text-bg-* picks the text colour for you. WCAG asks for a contrast ratio of at least 4.5:1 for normal-sized text. The post Web Accessibility Basics explains how to test this, and Colour Theory for UI Designers covers choosing a palette.

Further reading

• getbootstrap.com/docs/5.3/content/typography
• getbootstrap.com/docs/5.3/utilities/text
• getbootstrap.com/docs/5.3/utilities/colors
• getbootstrap.com/docs/5.3/helpers/color-background
• w3.org/WAI/WCAG22/Understanding/contrast-minimum.html