Typography and Text Utilities

<!-- Standard HTML headings — Bootstrap styles them consistently -->
<h1>Heading 1 — 2.5rem, bold</h1>
<h2>Heading 2 — 2rem, bold</h2>
<h3>Heading 3 — 1.75rem, bold</h3>
<h4>Heading 4 — 1.5rem, bold</h4>
<h5>Heading 5 — 1.25rem, bold</h5>
<h6>Heading 6 — 1rem, bold</h6>

<!-- Heading CLASSES on non-heading elements -->
<p class="h1">Looks like H1 but is a paragraph</p>
<div class="h3">Looks like H3 but is a div</div>

<h1 class="display-1">Display 1 — 5rem</h1>
<h1 class="display-2">Display 2 — 4.5rem</h1>
<h1 class="display-3">Display 3 — 4rem</h1>
<h1 class="display-4">Display 4 — 3.5rem</h1>
<h1 class="display-5">Display 5 — 3rem</h1>
<h1 class="display-6">Display 6 — 2.5rem</h1>

<!-- Lead: larger, lighter paragraph for introductions -->
<p class="lead">A lead paragraph stands out from regular body text, making it perfect for introductions.</p>

<!-- Inline text styling -->
<p>
  <strong>Bold text</strong> — for emphasis<br />
  <em>Italic text</em> — for tone<br />
  <mark>Highlighted text</mark> — yellow background<br />
  <del>Deleted text</del> — strikethrough<br />
  <ins>Inserted text</ins> — underline<br />
  <small>Small text</small> — 85% size<br />
  <abbr title="HyperText Markup Language">HTML</abbr> — tooltip on hover<br />
  <code>inline code</code> — monospace font
</p>

<!-- Blockquote -->
<blockquote class="blockquote">
  <p>"The best way to predict the future is to invent it."</p>
  <footer class="blockquote-footer">Alan Kay</footer>
</blockquote>

<!-- Horizontal alignment -->
<p class="text-start">Left aligned (default)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>

<!-- Responsive alignment -->
<p class="text-start text-md-center text-lg-end">
  Left on mobile, center on tablet, right on desktop
</p>

<p class="fw-bold">Bold text (font-weight: 700)</p>
<p class="fw-bolder">Bolder (relative to parent)</p>
<p class="fw-semibold">Semibold (font-weight: 600)</p>
<p class="fw-medium">Medium (font-weight: 500)</p>
<p class="fw-normal">Normal (font-weight: 400)</p>
<p class="fw-light">Light (font-weight: 300)</p>
<p class="fw-lighter">Lighter (relative to parent)</p>

<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

<p class="text-decoration-underline">Underlined</p>
<p class="text-decoration-line-through">Strikethrough</p>
<p class="text-decoration-none">No decoration</p>

<p class="text-lowercase">CONVERTED to lowercase</p>
<p class="text-uppercase">converted to UPPERCASE</p>
<p class="text-capitalize">each word capitalized</p>

<p class="text-primary">Primary blue</p>
<p class="text-secondary">Secondary gray</p>
<p class="text-success">Success green</p>
<p class="text-danger">Danger red</p>
<p class="text-warning">Warning yellow</p>
<p class="text-info">Info cyan</p>
<p class="text-light bg-dark">Light on dark</p>
<p class="text-dark">Dark text</p>
<p class="text-body">Default body color</p>
<p class="text-muted">Muted gray text</p>
<p class="text-white bg-primary">White text</p>

<!-- Truncate long text with ellipsis -->
<p class="text-truncate" style="max-width: 200px;">
  This is a very long text that will be truncated...
</p>

<!-- Prevent text wrapping -->
<p class="text-nowrap">This text will not wrap to a new line</p>

<!-- Break long words -->
<p class="text-break">VeryLongWordWithoutSpacesThatWouldOverflowContainer</p>

<!-- Font size utilities -->
<p class="fs-1">fs-1 (2.5rem)</p>
<p class="fs-2">fs-2 (2rem)</p>
<p class="fs-3">fs-3 (1.75rem)</p>
<p class="fs-4">fs-4 (1.5rem)</p>
<p class="fs-5">fs-5 (1.25rem)</p>
<p class="fs-6">fs-6 (1rem)</p>