Bootstrap 5 Display Heading
Bootstrap 5 Display Headings are oversized heading styles — `.display-1` through `.display-6` — designed for hero sections, landing pages, and anywhere you need text to command immediate visual attention beyond what standard `<h1>`–`<h6>` tags provide. They apply larger font sizes and lighter font weights than default headings, creating a typographic hierarchy suitable for high-impact layouts. Use them when standard headings feel too restrained and the page calls for bold, editorial-style typography.
Primary Class
.display-headingCommon Use Cases
- →Hero section taglines on SaaS landing pages, where a single punchy line like 'Ship faster. Break nothing.' needs to fill the viewport without feeling crowded
- →Event or conference sites displaying the event name and date at maximum visual weight so it reads clearly in both desktop banners and mobile previews
- →Portfolio homepages where a designer or agency uses a `.display-1` or `.display-2` headline to establish a premium, confident brand voice before any body copy appears
- →Pricing page section titles that separate plan tiers — using `.display-5` or `.display-6` to distinguish section headers from body text without pulling in a custom typeface
Variants & Classes
| Variant | Description |
|---|---|
| Display Heading Default | Standard display heading with Bootstrap's default styling. |
| Display Heading Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<section class="py-5 text-center"> <h1 class="display-1 fw-bold">Build something people love.</h1> <p class="display-6 text-muted">No-code tools that get out of your way.</p> <p class="lead mt-3">CanvasBuilder turns your idea into a live, production-ready website in minutes — powered by Bootstrap 5.</p> <a href="#" class="btn btn-primary btn-lg mt-3">Start for free</a> </section>
Live Examples
Basic Display Heading
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated display heading with custom colours
- ✓Display Heading with interactive states
- ✓Responsive display heading for all screen sizes
Best Practices
Pair display sizes intentionally for hierarchy
Use `.display-1` or `.display-2` for the primary headline and drop two levels — e.g. `.display-4` — for a subtitle. Jumping only one level often produces headings too similar in size to read as distinct hierarchy.
Override font-weight to control tone
Bootstrap's display headings default to a lighter weight (`font-weight: 300`). Add `.fw-bold` or `.fw-semibold` when the design needs punch — particularly on dark backgrounds where thin strokes can lose contrast.
Fluid sizing with CSS clamp for responsive display text
Bootstrap 5 doesn't fluid-scale display headings by default. Override with `font-size: clamp(2rem, 6vw, 5rem)` in your custom CSS to prevent text overflow on small screens without relying solely on breakpoint utility classes.
Keep display headings to one or two lines
At `.display-1` sizes a heading beyond two lines will dominate the entire viewport. If your copy runs longer, step down to `.display-3` or `.display-4` rather than reducing font-size with utility overrides, which break the spacing relationships.