0
0
Bootsrapmarkup~5 mins

Heading classes in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Heading classes help you quickly style titles and headings on your webpage with consistent sizes and spacing.

When you want to create clear section titles on a webpage.
When you need headings that look good on all screen sizes.
When you want to use predefined styles without writing custom CSS.
When you want to keep your webpage organized and easy to read.
When you want to make your headings accessible and consistent.
Syntax
Bootsrap
<h1 class="display-1">Heading text</h1>
<h2 class="display-2">Heading text</h2>
<h3 class="display-3">Heading text</h3>
<h4 class="display-4">Heading text</h4>

Use display-1 to display-4 classes for large, attention-grabbing headings.

These classes adjust font size and weight automatically for you.

Examples
This creates a very large heading using the display-1 class.
Bootsrap
<h1 class="display-1">Big Heading</h1>
This creates a medium large heading with display-3.
Bootsrap
<h2 class="display-3">Medium Heading</h2>
This is a smaller display heading using display-4.
Bootsrap
<h3 class="display-4">Smaller Heading</h3>
This is a normal heading without any display class, so it uses default Bootstrap styles.
Bootsrap
<h4>Normal Heading</h4>
Sample Program

This example shows how to use Bootstrap's heading classes display-1 to display-4 for big headings. The last heading uses the normal h5 tag without a display class.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Heading Classes Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-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>Normal h5 Heading</h5>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Heading classes like display-1 are meant for large, eye-catching titles, not for regular paragraph text.

Always use semantic heading tags (h1 to h6) for accessibility, even when adding display classes.

Bootstrap's display classes adjust font size and weight but keep the heading's semantic meaning.

Summary

Use Bootstrap heading classes display-1 to display-4 for big, styled headings.

These classes make headings look consistent and attractive without extra CSS.

Keep using proper heading tags for good structure and accessibility.