Typography
Use Boobstrap’s type scale, display text, lead copy, and semantic text utilities.
Typography
Headings and body copy receive sensible defaults. Use .bs-display for oversized hero text and .bs-lead for introductory copy.
Boobstrap
Heading one
Heading two
Heading three
Lead copy introduces a section with a larger, muted treatment.
Body copy inherits the framework text color and a comfortable 1.6 line height.
<p class="bs-display bs-text-gradient bs-mb-6">Boobstrap</p>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<p class="bs-lead bs-mb-4">Lead copy introduces a section with a larger, muted treatment.</p>
<p class="bs-mb-0">Body copy inherits the framework text color and a comfortable line height.</p>Text size utilities
Use the named type scale when text size is presentational and keep the semantic element appropriate to the content hierarchy.
Extra-small supporting text
Small metadata text
Default body text
Large introductory text
Section statement
<div class="bs-stack bs-gap-3">
<p class="bs-text-xs bs-mb-0">Extra-small supporting text</p>
<p class="bs-text-sm bs-mb-0">Small metadata text</p>
<p class="bs-text-md bs-mb-0">Default body text</p>
<p class="bs-text-xl bs-mb-0">Large introductory text</p>
<p class="bs-text-3xl bs-font-bold bs-mb-0">Section statement</p>
</div>Color, weight, and alignment
Combine single-purpose utilities for emphasis without changing the underlying semantic element.
Primary emphasized text
Muted supporting copy
Subtle editorial note
Right-aligned total: $128
<div class="bs-stack bs-gap-3">
<p class="bs-text-primary bs-font-semibold bs-mb-0">Primary emphasized text</p>
<p class="bs-text-muted bs-mb-0">Muted supporting copy</p>
<p class="bs-text-subtle bs-italic bs-mb-0">Subtle editorial note</p>
<p class="bs-text-right bs-font-bold bs-mb-0">Right-aligned total: $128</p>
</div>Hierarchy
Choose heading levels from the document outline. Use size classes to change appearance without skipping semantic levels.
Readability
Reserve .bs-display for short hero copy. Body and lead text keep more generous line height for sustained reading.
Emphasis
Weight, color, and italic utilities are presentational. Do not rely on color alone to convey a warning, error, or required state.