Bootstrap Typography & Content

Learn how to style headings, paragraphs, links, lists, quotes, and code snippets using Bootstrap utility classes and content helpers.

These classes help you keep text readable, consistent, and responsive without writing custom CSS for every section.

Why Typography Utilities Matter

Typography controls the hierarchy of your content. Bootstrap gives ready classes for size, weight, color, line-height, alignment, and wrapping, so your pages stay visually clear even when many contributors work on the same codebase.

Consistency: Same text scale and spacing across pages.
Speed: No need to create one-off CSS classes for common text styles.
Responsiveness: Utilities combine with breakpoints for mobile-first readability.
Maintainability: Easier design updates by changing fewer global rules.

Headings and Display Text

Class / Tag	Use Case	Example
`<h1>...</h1>` to `<h6>...</h6>`	Semantic headings for SEO and accessibility.	Section titles with proper document structure.
`.h1` to `.h6`	Heading size on non-heading tags.	`<p class="h3">Styled like H3</p>`
`.display-1` to `.display-6`	Large hero headlines and banners.	Landing page hero heading.
`.lead`	Intro paragraph directly below heading.	Bigger paragraph for summary text.

Alignment and Text Transform Utilities

Use these classes to control alignment and casing quickly in cards, headers, badges, navbars, and callouts.

<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

<p class="text-uppercase">uppercase text</p>
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-capitalize">capitalize each word</p>

Weight, Style, and Color

Utility	Purpose	Sample
`fw-bold`, `fw-semibold`, `fw-light`	Control font weight.	Titles, labels, and emphasis control.
`fst-italic`	Italic style for notes/quotes.	Highlight side remarks.
`text-primary`, `text-success`, `text-danger`	Semantic text color classes.	Status or contextual text.
`text-muted`, `text-body-secondary`	Secondary helper text.	Captions, descriptions, metadata.

Lists, Quotes, and Inline Code

<ul class="list-unstyled">
  <li>No bullet item</li>
  <li>Another item</li>
</ul>

<blockquote class="blockquote">
  <p>Bootstrap helps build consistent UI fast.</p>
</blockquote>

<p>Use <code>.text-center</code> for centered text.</p>
<pre><code>npm install bootstrap</code></pre>

Typography Best Practices

Use semantic headings in correct order: h1 to h6.
Avoid using only color to convey meaning; combine with icons or labels.
Prefer utility classes over random inline styles for consistency.
Keep line lengths readable and use spacing utilities for breathing room.
Test text hierarchy on both mobile and desktop before publishing.