Bootstrap - typography

Bootstrap 5 provides a comprehensive typography system that makes it easy to style text consistently across your project. It includes headings, body text, lists, inline text, alignment, wrapping, and responsive utilities. Here’s a detailed guide:

1. Headings

Bootstrap 5 provides standard HTML headings (h1–h6) with optional .display-* classes for larger headings.

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

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

.display-* classes are larger and lighter than standard headings.

2. Lead Text

Use .lead for larger introductory paragraphs.

<p class="lead">
  This is a lead paragraph. It stands out from regular text.
</p>

3. Inline Text

a) Emphasis

<p><mark>Highlighted text</mark></p>
<p><small>Small text</small></p>
<p><strong>Bold text</strong></p>
<p><em>Italic text</em></p>
<p><del>Strikethrough</del></p>
<p><ins>Inserted text</ins></p>

b) Monospace / Code

<p><code>Inline code</code></p>
<pre>Preformatted text block</pre>

4. Text Color

Bootstrap provides text color utility classes:

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text on dark</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text on dark</p>

5. Text Alignment

Use .text-start, .text-center, .text-end, or responsive variants:

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

<p class="text-md-start text-lg-center text-xl-end">Responsive alignment</p>

6. Text Wrapping & Truncation

a) Wrapping

<p class="text-wrap">This text will wrap normally inside its container.</p>
<p class="text-nowrap">This text will not wrap and may overflow.</p>

b) Truncation

<div class="text-truncate" style="width: 200px;">
  This text will be truncated with an ellipsis.
</div>

7. Text Transform

<p class="text-lowercase">lowercase text</p>
<p class="text-uppercase">UPPERCASE TEXT</p>
<p class="text-capitalize">Capitalized Text</p>

8. Font Weight & Italic

<p class="fw-light">Light font weight</p>
<p class="fw-normal">Normal font weight</p>
<p class="fw-bold">Bold font weight</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal text style</p>

.fw-* → Font weight
.fst-* → Font style

9. Lists

a) Unordered and Ordered

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

b) Inline Lists

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

c) Unstyled List

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

10. Blockquotes

<blockquote class="blockquote">
  <p>A well-known quote.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

11. Address

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

12. Responsive Typography

Use responsive font sizes:

<h1 class="fs-1">Font size 1</h1>
<h2 class="fs-2">Font size 2</h2>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6</p>

Classes .fs-1 (largest) to .fs-6 (smallest)

13. Example: Full Typography Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Typography</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h1 class="display-1">Display 1</h1>

<p class="lead">This is a lead paragraph.</p>
<p class="text-muted">Muted text example.</p>
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>

<ul class="list-inline">
  <li class="list-inline-item">Inline 1</li>
  <li class="list-inline-item">Inline 2</li>
  <li class="list-inline-item">Inline 3</li>
</ul>

<blockquote class="blockquote">
  <p>This is a blockquote.</p>
  <footer class="blockquote-footer">Someone famous</footer>
</blockquote>

<p class="text-truncate" style="width: 200px;">This text will be truncated if too long.</p>

<p class="text-center text-primary text-uppercase fw-bold fs-4">Centered, Primary, Uppercase, Bold, FS-4</p>

</body>
</html>