BootstrapHow-ToBeginner · 4 min read

How to Use Headings in Bootstrap: Syntax and Examples

In Bootstrap, use standard HTML heading tags <h1> to <h6> for headings and add Bootstrap classes like .h1 to .h6 to style any element with heading sizes. This lets you keep semantic HTML while applying Bootstrap's consistent heading styles.

📐

Syntax

Bootstrap headings use standard HTML tags <h1> to <h6> for semantic structure. You can also apply Bootstrap classes .h1 to .h6 on any element to get the same visual size without changing the tag.

<h1>Heading 1</h1>: Semantic top-level heading.
<h2>Heading 2</h2>: Second-level heading.
.h1 to .h6 classes: Apply heading styles to any element.

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p class="h3">This paragraph looks like a Heading 3</p>

Output

Heading 1 (large bold text) Heading 2 (slightly smaller bold text) This paragraph looks like a Heading 3 (medium bold text styled like h3)

💻

Example

This example shows how to use both semantic heading tags and Bootstrap heading classes to style text.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Headings Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
  <h1>Heading 1 (h1 tag)</h1>
  <h2>Heading 2 (h2 tag)</h2>
  <h3>Heading 3 (h3 tag)</h3>
  <p class="h4">Paragraph styled as Heading 4</p>
  <div class="h5">Div styled as Heading 5</div>
  <span class="h6">Span styled as Heading 6</span>
</body>
</html>

Output

Heading 1 (largest bold text) Heading 2 (second largest bold text) Heading 3 (medium bold text) Paragraph styled as Heading 4 (smaller bold text) Div styled as Heading 5 (even smaller bold text) Span styled as Heading 6 (smallest bold text)

⚠️

Common Pitfalls

Common mistakes when using Bootstrap headings include:

Using heading classes on elements without semantic meaning, which can confuse screen readers.
Mixing heading tags and classes inconsistently, hurting accessibility.
Not including Bootstrap CSS, so classes have no effect.

Always use semantic heading tags for structure and use classes only for styling non-heading elements.

html

<!-- Wrong: Using .h1 class on a <div> without semantic meaning -->
<div class="h1">This looks like a heading but is not semantic</div>

<!-- Right: Use semantic heading tag for real headings -->
<h1>This is a proper heading</h1>

Output

This looks like a heading but is not semantic (styled large but no heading meaning) This is a proper heading (large bold heading with semantic meaning)

📊

Quick Reference

Bootstrap Heading Class	Effect	Typical Use
.h1	Largest heading size	Apply to any element for h1 style
.h2	Second largest heading size	Apply to any element for h2 style
.h3	Medium heading size	Apply to any element for h3 style
.h4	Smaller heading size	Apply to any element for h4 style
.h5	Even smaller heading size	Apply to any element for h5 style
.h6	Smallest heading size	Apply to any element for h6 style

✅

Key Takeaways

Use semantic <h1> to <h6> tags for proper document structure.

Apply Bootstrap classes .h1 to .h6 to style any element with heading sizes.

Avoid using heading classes on non-semantic elements for real headings to keep accessibility.

Include Bootstrap CSS to ensure heading classes work correctly.

Mix semantic tags and classes thoughtfully for both style and accessibility.