Bootstrap 5 Lead Text
Bootstrap 5's Lead Text component uses the `.lead` class to make a paragraph visually larger and slightly lighter in weight than body copy, creating a natural visual hierarchy between a heading and supporting content. It's designed for introductory paragraphs that need to stand out — such as the opening sentence of a landing page section, an article abstract, or a hero description. Use it sparingly: one lead paragraph per section, not as a replacement for all body text.
Primary Class
.lead-textCommon Use Cases
- →Hero section subtitle: placed directly beneath an H1 to summarise a product's core value proposition before the primary CTA button
- →Blog post intro: used as the first paragraph of an article to give readers a preview of the content and encourage them to continue reading
- →Pricing page section opener: introduces the pricing tiers with a sentence explaining the billing model before the comparison table
- →About page mission statement: presents a company's core mission in a single prominent paragraph above a supporting grid of team member cards
Variants & Classes
| Variant | Description |
|---|---|
| Lead Text Default | Standard lead text with Bootstrap's default styling. |
| Lead Text Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<section class="py-5">
<div class="container">
<h1 class="display-5 fw-bold">Build websites in minutes, not weeks</h1>
<p class="lead">
CanvasBuilder turns your plain-English brief into a fully structured, production-ready HTML page — complete with Bootstrap 5 components, responsive layout, and clean semantic markup.
</p>
<a href="#get-started" class="btn btn-primary btn-lg">Start building free</a>
</div>
</section>Live Examples
Basic Lead Text
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated lead text with custom colours
- ✓Lead Text with interactive states
- ✓Responsive lead text for all screen sizes
Best Practices
Pair .lead with a display heading, not an H3 or H4
The `.lead` class increases font-size to `1.25rem` with `font-weight: 300`, so it pairs best visually with `.display-4` or `.display-5` headings — using it under a small H3 collapses the size contrast and defeats the purpose.
Override font-weight for dark backgrounds
Bootstrap's `.lead` applies `font-weight: 300`, which can render poorly on dark or coloured backgrounds due to low contrast. Add `fw-normal` or `fw-semibold` alongside `.lead` to improve legibility without writing custom CSS.
Keep it to one or two sentences
Lead text loses its visual impact if it runs longer than 30–40 words — readers begin treating it as standard body copy. If your intro requires more explanation, use `.lead` for the hook sentence only, then continue with regular `<p>` tags.
Combine with text-muted for a softer intro tone
Adding `text-muted` to `.lead` reduces emphasis slightly, which works well for supporting subtitles beneath a bold CTA heading where you want hierarchy without the lead competing with the primary message.