Headings & Display in Bootstrap
From the Bootstrap 5 cheat sheet · Typography · verified Jul 2026
Headings & Display
Typography heading styles
html
<!-- Headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<!-- Heading Classes -->
<p class="h1">h1 styling on paragraph</p>
<p class="h2">h2 styling on paragraph</p>
<!-- Display Headings -->
<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 headings are larger and more impactful than regular headings
⚡ Use heading classes to apply heading styles without changing semantics
📌 Lead class makes paragraph text stand out
🔥 Blockquotes with figure/figcaption for semantic HTML5