Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Display Headings in Bootstrap 5
Display Headings: Larger, lighter heading style for when you need to grab attention.
What are Display Headings?
Display headings are larger, lighter heading styles meant for hero sections, landing pages, and places where you need to make a big visual impact. They're bigger than regular headings but with a lighter font weight.
Regular Heading
Regular h1 Heading
<h1> - 2.5rem, font-weight: 500
Display Heading
Display 1 Heading
.display-1 - 5rem, font-weight: 300
All Display Heading Sizes
Display 1 to Display 6
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<!-- All display heading sizes -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>Display Heading Specifications
Technical Details
| Class | Font Size | Line Height | Font Weight | Use Case |
|---|---|---|---|---|
.display-1 | 5rem (80px) | 1.2 | 300 | Hero sections |
.display-2 | 4.5rem (72px) | 1.2 | 300 | Large banners |
.display-3 | 4rem (64px) | 1.2 | 300 | Page headers |
.display-4 | 3.5rem (56px) | 1.2 | 300 | Section titles |
.display-5 | 3rem (48px) | 1.2 | 300 | Feature headings |
.display-6 | 2.5rem (40px) | 1.2 | 300 | Sub-headings |
Comparison with Regular Headings
| Type | Size | Weight |
|---|---|---|
.display-1 | 5rem | 300 (light) |
h1 | 2.5rem | 500 (medium) |
.display-6 | 2.5rem | 300 (light) |
h1 | 2.5rem | 500 (medium) |
Default CSS (Example for display-1)
.display-1 {
font-size: 5rem;
font-weight: 300;
line-height: 1.2;
}When to Use Display Headings
🎯
Hero Sections
Perfect for landing page hero areas to grab attention immediately.
🚀
Marketing Pages
Great for product launches, announcements, and promotional content.
✨
Visual Impact
When you need to make a strong visual statement on the page.
Display Headings with Utility Classes
Styling Display Headings
Text Colors
Primary Display
Success Display
Danger Display
Text Alignment
Centered Display
Right Aligned Display
Responsive Alignment
Responsive Display
Centered on mobile, left on tablet, right on desktop
<!-- Styled display headings -->
<h1 class="display-1 text-primary text-center mb-4">
Primary Centered Display
</h1>
<h2 class="display-3 text-success fw-bold">
Bold Success Display
</h2>
<h1 class="display-4 text-center text-md-start">
Responsive alignment
</h1>Display Headings with Secondary Text
Using <small> Tag
Amazing Product With revolutionary features
<h1 class="display-3">
Main heading
<small class="text-muted">Secondary text</small>
</h1>Using .lead Class
Welcome to Our Platform
A revolutionary solution for all your business needs. Get started today!
<h1 class="display-4">Main heading</h1>
<p class="lead">
Supporting text with .lead class
</p>Responsive Display Headings
Responsive Behavior
Display headings are responsive by default. They scale down on smaller screens.
Responsive Display
Changes from display-1 to display-3 on tablet, back to display-1 on desktop
| Screen Size | Class Applied | Font Size | Visual Impact |
|---|---|---|---|
| Mobile (<768px) | .display-1 | 3.5rem (scaled down) | Large but fits screen |
| Tablet (≥768px) | .display-md-3 | 3rem | Moderate size |
| Desktop (≥992px) | .display-lg-1 | 5rem | Maximum impact |
<!-- Responsive display heading -->
<h1 class="display-1 display-md-3 display-lg-1">
<!--
display-1 on mobile (scaled)
display-3 on tablet
display-1 on desktop
-->
</h1>
<!-- Alternative responsive approach -->
<h1 class="display-4 display-lg-2">
<!-- Smaller on mobile, larger on desktop -->
</h1>Practical Examples
Example 1: Hero Section
Build Amazing Apps
Create beautiful, responsive web applications with our powerful tools and frameworks.
<div class="text-center py-5">
<h1 class="display-1 text-primary mb-3">
Build Amazing Apps
</h1>
<p class="lead mb-4">
Create beautiful, responsive web applications...
</p>
<button class="btn btn-primary btn-lg">
Get Started
</button>
</div>Example 2: Feature Highlight
99.9%
Uptime Guarantee
Our servers are reliable with industry-leading uptime.
<div class="row align-items-center">
<div class="col-md-6">
<h1 class="display-2 text-success">
99.9%
</h1>
</div>
<div class="col-md-6">
<h3>Uptime Guarantee</h3>
<p>Our servers are reliable...</p>
</div>
</div>Display vs Regular Headings
| Aspect | Display Headings | Regular Headings |
|---|---|---|
| Purpose | Visual impact, attention-grabbing | Content structure, hierarchy |
| Font Weight | 300 (light) | 500 (medium) |
| Size Range | 2.5rem - 5rem (larger) | 1rem - 2.5rem (smaller) |
| Usage | Hero sections, marketing | Content sections, articles |
| Semantic Value | Same as regular headings | Proper document structure |
| Frequency | Sparingly (1-2 per page) | Throughout content |
Best Practices for Display Headings
When to Use Display Headings
- ✅ Hero sections and landing pages
- ✅ Marketing and promotional content
- ✅ Statistics and numbers display
- ✅ Page titles that need visual impact
- ✅ Announcements and important notices
When to Avoid Display Headings
- ❌ Regular content sections
- ❌ Long articles and blog posts
- ❌ Navigation and UI elements
- ❌ Forms and input labels
- ❌ When regular headings would suffice
Common Mistakes with Display Headings
- ❌ Using them too frequently on one page
- ❌ Not making them responsive
- ❌ Using display-1 on mobile without scaling
- ❌ Forgetting about line length on large text
- ❌ Using them for semantic structure instead of visual impact
Customizing Display Headings with SCSS
SCSS Customization
Customize display heading styles in your SCSS variables:
// Customize display heading variables
$display-font-sizes: (
1: 6rem, // Changed from 5rem
2: 5.5rem,// Changed from 4.5rem
3: 5rem, // Changed from 4rem
4: 4.5rem,// Changed from 3.5rem
5: 4rem, // Changed from 3rem
6: 3.5rem // Changed from 2.5rem
);
$display-font-weight: 400; // Changed from 300
$display-line-height: 1.1; // Changed from 1.2
// Add custom display size
$display-font-sizes: map-merge(
$display-font-sizes,
(
7: 2rem // Custom display-7
)
);
// Import Bootstrap
@import "bootstrap/scss/bootstrap";Tip: When customizing display headings, maintain the visual hierarchy and ensure they remain responsive.
Accessibility Considerations
Accessibility Best Practices
- Contrast ratio: Ensure sufficient contrast between text and background
- Font weight: Light font weights (300) can be hard to read for some users
- Responsive sizing: Make sure text remains readable on all devices
- Semantic structure: Use proper heading tags even with display classes
- Screen readers: Display headings work normally with screen readers
- Zoom support: Test that text remains readable when zoomed in
