BootstrapHow-ToBeginner · 3 min read

How to Use Display Headings in Bootstrap: Simple Guide

In Bootstrap, use the display-1 to display-6 classes on heading tags or any text element to create large, attention-grabbing display headings. These classes scale the font size and weight for prominent headings easily.

📐

Syntax

Bootstrap display headings use classes named display-1 through display-6. You add these classes to any heading tag like <h1> or a <div> to make the text large and bold.

display-1 is the largest size.
display-6 is the smallest display size.

Example: <h1 class="display-1">Big Heading</h1>

html

<h1 class="display-1">Display 1 Heading</h1>
<h2 class="display-2">Display 2 Heading</h2>
<h3 class="display-3">Display 3 Heading</h3>
<h4 class="display-4">Display 4 Heading</h4>
<h5 class="display-5">Display 5 Heading</h5>
<h6 class="display-6">Display 6 Heading</h6>

Output

Six headings stacked vertically, each with decreasing large font sizes from very big (display-1) to smaller but still large (display-6).

💻

Example

This example shows how to use Bootstrap display heading classes on different heading tags to create large, bold headings that stand out on the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Display 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-4">
  <h1 class="display-1">Display 1 Heading</h1>
  <h2 class="display-2">Display 2 Heading</h2>
  <h3 class="display-3">Display 3 Heading</h3>
  <h4 class="display-4">Display 4 Heading</h4>
  <h5 class="display-5">Display 5 Heading</h5>
  <h6 class="display-6">Display 6 Heading</h6>
</body>
</html>

Output

A webpage showing six headings stacked vertically, each with a distinct large font size from very large (display-1) to smaller large (display-6), all bold and easy to read.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap display headings include:

Not including the Bootstrap CSS file, so the classes have no effect.
Using display classes without heading tags, which is allowed but may affect semantics and accessibility.
Mixing display classes with other font size utilities that can cause unexpected results.
Expecting display classes to change the HTML tag semantics; they only style the text.

Always ensure Bootstrap CSS is loaded and use display classes mainly for visual emphasis.

html

<!-- Wrong: Missing Bootstrap CSS link, display classes won't work -->
<h1 class="display-1">Heading without Bootstrap CSS</h1>

<!-- Right: Include Bootstrap CSS for display classes to work -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<h1 class="display-1">Heading with Bootstrap CSS</h1>

Output

Without Bootstrap CSS, the heading looks normal and small; with Bootstrap CSS, the heading is large and bold.

📊

Quick Reference

Use these classes to create large headings quickly:

Class	Description
display-1	Largest display heading size
display-2	Second largest display heading
display-3	Medium-large display heading
display-4	Medium display heading
display-5	Small-large display heading
display-6	Smallest display heading

✅

Key Takeaways

Use Bootstrap's display-1 to display-6 classes to create large, bold headings easily.

Always include Bootstrap CSS for display classes to work correctly.

Display classes style text size and weight but do not change HTML semantics.

You can apply display classes to any text element, but heading tags improve accessibility.

Avoid mixing display classes with other font size utilities to prevent style conflicts.