0
0
Bootsrapmarkup~5 mins

Display headings in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Headings help organize content and show importance. They make pages easier to read and understand.

When you want to give a title to a section on a webpage.
To show different levels of importance in text, like main title and subtitles.
When you want to improve accessibility by structuring content clearly.
To help search engines understand the page structure.
When you want consistent styling for headings using Bootstrap.
Syntax
Bootsrap
<h1 class="display-1">Heading 1</h1>
<h2 class="display-2">Heading 2</h2>
<h3 class="display-3">Heading 3</h3>
<h4 class="display-4">Heading 4</h4>

Bootstrap provides display-1 to display-4 classes for large, stylish headings.

Use semantic tags like <h1> to <h6> for meaning, and add display classes for style.

Examples
This shows the largest heading style with display-1.
Bootsrap
<h1 class="display-1">Big Heading</h1>
A slightly smaller heading using display-2.
Bootsrap
<h2 class="display-2">Second Level Heading</h2>
Medium sized heading with display-3.
Bootsrap
<h3 class="display-3">Medium Heading</h3>
Smallest display heading style with display-4.
Bootsrap
<h4 class="display-4">Smaller Heading</h4>
Sample Program

This page shows four headings with Bootstrap's display classes. Each heading is bigger and bolder than normal text, making them stand out clearly.

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

Always use semantic heading tags (<h1> to <h6>) for accessibility and SEO.

Bootstrap's display classes make headings larger and more stylish without extra CSS.

Use container and spacing classes like container and mt-5 to keep layout neat and responsive.

Summary

Headings organize content and show importance on a webpage.

Bootstrap display classes display-1 to display-4 style headings with big, bold text.

Use semantic tags with display classes for good structure and style.