Bootstrap 5Content

Bootstrap 5 Lead Text

Q: What exactly does Bootstrap 5's .lead class change compared to normal paragraph text?

The .lead class applies font-size: 1.25rem (compared to the default 1rem body font size) and sets font-weight: 300. It does not change line-height, colour, or margin by default. This means the visual difference is subtle, intentionally so, making it suitable for intro text that needs prominence without screaming for attention.

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.

Bootstrap class

.lead

Common 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 and classes

Variant	Description and classes	Classes
Lead paragraph	Larger, lighter intro paragraph.`lead`	`lead`
Muted lead	Lower-contrast lead under a heading.`lead text-body-secondary`	`lead text-body-secondary`
Centred intro	Centred lead with a readable line length.`lead text-center mx-auto`	`lead text-center mx-auto`
With display heading	Pairs a display heading with a lead.`display-5 fw-bold + lead`	`display-5 fw-bold + lead`

Code example

HTML

<section class="py-5">
  <div class="container">
    <h1 class="display-5 fw-bold">Build websites in minutes, not weeks</h1>
    <p class="lead">
      Canvas Builder 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

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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 to 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.

FAQ

What exactly does Bootstrap 5's .lead class change compared to normal paragraph text?

The .lead class applies font-size: 1.25rem (compared to the default 1rem body font size) and sets font-weight: 300. It does not change line-height, colour, or margin by default. This means the visual difference is subtle, intentionally so, making it suitable for intro text that needs prominence without screaming for attention.

Can I change the font size or weight of .lead without overriding Bootstrap's source?

Yes. The cleanest approach is to add Bootstrap utility classes directly on the element, for example class="lead fs-4 fw-normal" to increase size to 1.5rem and normalise the weight. Alternatively, in a custom stylesheet add .lead { font-size: 1.4rem; font-weight: 400; } after the Bootstrap CDN link. If you're using Sass, override the $lead-font-size and $lead-font-weight variables before importing Bootstrap.

How does Canvas Builder handle Lead Text when generating a page?

When Canvas Builder detects an introductory or summary sentence in your brief, typically the second line of a section description or any sentence framed as a product tagline, it automatically wraps it in a <p class="lead"> tag. It also applies your brand's configured font and ensures the element is placed inside a correctly constrained .container div, so it respects max-width on large screens and collapses cleanly on mobile.