Bootstrap Typography & Colors
Bootstrap styles headings, paragraphs, and lists automatically. Utility classes add emphasis: .lead for intro text, .text-muted for secondary text, .display-1 to .display-6 for huge hero headings.
Typography
Bootstrap styles headings, paragraphs, and lists automatically. Utility classes add emphasis: .lead for intro text, .text-muted for secondary text, .display-1 to .display-6 for huge hero headings.
Use .fw-bold, .fw-normal, .fst-italic, and .text-uppercase for quick text tweaks without custom CSS.
Real-life example: Typography classes are like font settings in Word — bold title, gray subtitle, big headline — without opening a separate design app.
<h1>h1 — page title</h1>
<p class="lead">Lead paragraph — slightly larger intro text.</p>
<p class="text-muted">Muted secondary information.</p>
<h1 class="display-4 fw-bold">Display heading for heroes</h1>
<p class="fs-3">Font size utility fs-3</p>Colors
Bootstrap has theme colors: primary, secondary, success, danger, warning, info, light, dark. Apply them with .text-* for text and .bg-* for backgrounds.
Add .text-bg-* on badges and components for accessible contrast pairs. Use .link-* to color links.
Real-life example: Theme colors are like a school house system — red team (danger), green team (success), blue team (primary). Everyone knows red means stop or error.
<p class="text-primary">Primary blue text</p>
<p class="text-danger">Danger red text</p>
<span class="badge text-bg-success">Success badge</span>
<span class="badge text-bg-warning">Warning badge</span>
<div class="p-3 mb-2 bg-info text-dark">Info background box</div>
<a href="#" class="link-danger">Danger link</a>