Bootstrap Typography

Typography is the art of making text easy and pleasant to read. Bootstrap 5 ships with a clean set of default styles and a family of helper classes that let you control the size, weight, alignment, and style of your text without writing a single line of your own CSS. In this lesson you will learn how Bootstrap styles headings and paragraphs, and how to use display headings, lead text, inline text elements, and text utility classes.

Default Typography Settings

When you include Bootstrap on a page, it automatically applies sensible defaults to your text. It sets the base font size, uses a native font stack (the fonts already installed on the visitor's device), and gives every element a comfortable line height. This means your text looks good straight away, even before you add any classes.

Bootstrap styles all six HTML headings, from <h1> down to <h6>, so they shrink in size as the number gets bigger. You can use the heading tags directly, and Bootstrap takes care of the spacing and font weight for you.

Headings h1 to h6

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h1>Bootstrap heading h1</h1>
<h2>Bootstrap heading h2</h2>
<h3>Bootstrap heading h3</h3>
<h4>Bootstrap heading h4</h4>
<h5>Bootstrap heading h5</h5>
<h6>Bootstrap heading h6</h6>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Display Headings

Sometimes a normal heading is not big enough to grab attention, for example on a landing page or a hero banner. Bootstrap gives you display headings for this. Add a class from .display-1 (largest) to .display-6 (smallest) to any element to make the text stand out with a larger size and a lighter font weight.

Display headings

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: Display headings are visual styles only. Always pick the heading tag (h1, h2, and so on) that matches the structure of your page, then add a display class to change how it looks. This keeps your page accessible for screen readers and good for search engines.

Lead Text and Inline Elements

The .lead class makes a paragraph stand out by increasing its size and giving it a lighter weight. It is perfect for an opening sentence or a short introduction. Bootstrap also styles common inline HTML elements such as <mark> for highlighting, <small> for fine print, <del> for deleted text, and <strong> for bold emphasis.

Lead paragraph and inline text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<p class="lead">This is a lead paragraph. It stands out from the text around it.</p>
<p>You can <mark>highlight</mark> words, mark text as <del>deleted</del>,
   add <strong>strong emphasis</strong>, or show <small>small print</small>.</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Text Alignment, Transform, and Weight Utilities

Bootstrap includes handy utility classes so you can adjust text without custom CSS. Use .text-start, .text-center, and .text-end to align text. Use .text-lowercase, .text-uppercase, and .text-capitalize to change letter case. Use .fw-bold, .fw-normal, and .fw-light for font weight, and .fst-italic for italic style.

ClassWhat it does
.text-centerCenters the text horizontally
.text-uppercaseTransforms the text to UPPERCASE
.text-capitalizeCapitalizes The First Letter Of Each Word
.fw-boldMakes the text bold
.fst-italicMakes the text italic
.text-truncateCuts off long text with an ellipsis (...)

Text utilities in action

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<p class="text-center fw-bold">Bold and centered text</p>
<p class="text-uppercase">this becomes uppercase</p>
<p class="fst-italic text-end">Italic text aligned to the right</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: Utility classes can be combined freely. For example, class="text-center fw-bold fst-italic" will center the text and make it both bold and italic at the same time.

Exercise: Bootstrap Typography

What is the purpose of heading classes like .h1 through .h6?

Keep Going

Bootstrap Interview QuestionsPractice real questions asked for BootstrapFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Bootstrap and tweak your resume