Bootstrap Typography
Bootstrap sets sensible default typography for headings, paragraphs and text, and provides utility classes to fine-tune font size, weight, alignment and style without writing custom CSS.
Headings h1 through h6 come pre-styled, and classes like .display-1 through .display-6 create even larger, more prominent headings often used for hero sections.
<h1 class="display-4">Big Heading</h1>
<p class="text-muted">Muted text</p>Headings and display classes
Standard headings (h1-h6) are automatically styled. Display classes like .display-1 create oversized, lighter-weight headlines for landing pages.
Text utilities
Classes such as .text-center, .text-muted, .fw-bold, .fst-italic and .text-uppercase let you adjust alignment, weight, style and casing directly in your HTML.
<h1 class="display-4 fw-bold">Welcome</h1>
<p class="lead">A short introduction using the lead class.</p>A large bold heading followed by a slightly bigger intro paragraphdisplay-4 makes the heading large, and lead increases the paragraph's font size for emphasis.
<p class="text-center text-uppercase text-muted">centered muted text</p>CENTERED MUTED TEXT (centered, gray, uppercase)Multiple text utility classes can be combined on one element.
Key points
- h1-h6 headings are styled automatically by Bootstrap.
- Display classes create larger, eye-catching headings.
- .lead makes a paragraph stand out.
- Text utilities control alignment, weight, style and case.