Bootstrap 5Content

Bootstrap 5 Display Heading

Q: What is the actual font size difference between a standard and a .display-1 in Bootstrap 5?

Bootstrap 5 sets at 2rem (32px at default browser size). .display-1 renders at 5rem (80px) with a font-weight of 300. The display scale runs from 5rem down to 2.5rem for .display-6, so even the smallest display class is larger than a standard . These values are controlled by the Sass variables $display-font-sizes, $display-font-weight, and $display-line-height, all of which you can override in a custom build.

Q: How do I change the colour or font-family of a display heading to match my brand?

Apply Bootstrap's text colour utilities directly, e.g. class="display-2 text-primary", or target the class in your stylesheet with [class*='display-'] { color: #your-hex; }. To swap the typeface, override $display-font-family in Sass before importing Bootstrap, or add font-family: 'YourFont', sans-serif; in your custom CSS after Bootstrap's stylesheet. Avoid inline styles; they're harder to maintain and block theming.

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.

Bootstrap class

.display-1 to .display-6

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

Variant	Description and classes	Classes
Display 1	Largest display size for short hero headlines.`display-1`	`display-1`
Smaller display sizes	Steps down for section headings.`display-4 / display-6`	`display-4 / display-6`
Bold display	Heavier weight than the default light display style.`display-5 fw-bold`	`display-5 fw-bold`
With lead text	Display heading followed by an intro paragraph.`display-5 + lead`	`display-5 + lead`

Code example

HTML

<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">Canvas Builder turns your idea into a production-ready Bootstrap 5 website in 5 to 10 minutes.</p>
  <a href="#" class="btn btn-primary btn-lg mt-3">Start for free</a>
</section>

Live examples

Basic Display Heading

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

FAQ

What is the actual font size difference between a standard <h1> and a .display-1 in Bootstrap 5?

Bootstrap 5 sets <h1> at 2rem (32px at default browser size). .display-1 renders at 5rem (80px) with a font-weight of 300. The display scale runs from 5rem down to 2.5rem for .display-6, so even the smallest display class is larger than a standard <h1>. These values are controlled by the Sass variables $display-font-sizes, $display-font-weight, and $display-line-height, all of which you can override in a custom build.

How do I change the colour or font-family of a display heading to match my brand?

Apply Bootstrap's text colour utilities directly, e.g. class="display-2 text-primary", or target the class in your stylesheet with [class*='display-'] { color: #your-hex; }. To swap the typeface, override $display-font-family in Sass before importing Bootstrap, or add font-family: 'YourFont', sans-serif; in your custom CSS after Bootstrap's stylesheet. Avoid inline styles; they're harder to maintain and block theming.

How does Canvas Builder handle Display Headings when generating a page?

When you describe a hero or landing section in Canvas Builder, the AI selects the appropriate .display-* class based on the visual weight you specify, choosing .display-1 for full-bleed heroes and .display-4 or .display-5 for section titles within content areas. It applies your brand's primary colour via Bootstrap's CSS custom properties and outputs semantic HTML using the correct heading tag (<h1>, <h2>, etc.) so the display class handles only visual styling while document structure remains accessible.