In Bootstrap, headings are styled to provide a consistent and responsive typographic scale across different screen sizes. Bootstrap offers classes for all HTML heading elements (<h1> through <h6>) and includes utility classes to modify the appearance of these headings.

1. Basic Heading Tags

Bootstrap doesn't modify the basic HTML heading tags. You can simply use <h1>, <h2>, <h3>, etc., for different levels of headings. They automatically scale in size based on the tag, with <h1> being the largest and <h6> the smallest.

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>

2. Heading Classes (.h1 to .h6)

Bootstrap provides utility classes like .h1, .h2, .h3, etc., which can be used to style any element to look like a particular heading. This is useful when you want to apply a heading size to elements other than <h1> to <h6> tags.

<p class="h1">This paragraph is styled like an H1 heading</p>
<p class="h2">This paragraph is styled like an H2 heading</p>

3. Display Headings

For larger and more prominent headings, Bootstrap offers display heading classes (.display-1 to .display-6), which are significantly larger than regular headings and are often used for main titles or hero sections.

<h1 class="display-1">Display 1 Heading</h1>
<h1 class="display-2">Display 2 Heading</h1>
<h1 class="display-3">Display 3 Heading</h1>
<h1 class="display-4">Display 4 Heading</h1>
<h1 class="display-5">Display 5 Heading</h1>
<h1 class="display-6">Display 6 Heading</h1>

4. Lead Paragraphs

For introductory or lead text, Bootstrap offers the .lead class, which can be applied to paragraphs for slightly larger and lighter text.

<p class="lead">This is a lead paragraph that stands out a bit more.</p>

5. Customizing Headings

You can combine heading tags or classes with other Bootstrap utility classes like text color and text alignment. For example, you can add .text-center to center-align the heading or use color classes like .text-primary, .text-success, etc.

<h1 class="text-center text-primary">Centered Primary Heading</h1>
<h2 class="text-success">Green Success Heading</h2>

6. Secondary Text within Headings

If you want to include secondary or smaller text within a heading (like a subtitle), Bootstrap suggests using the <small> tag. You can combine this with the .text-muted class to make the secondary text appear lighter.

<h1>Primary Heading <small class="text-muted">with secondary text</small></h1>
<h2>Another Heading <small class="text-muted">with muted subtitle</small></h2>

7. Responsive Font Sizes

Bootstrap headings are responsive by default, meaning they automatically adjust based on the screen size. However, if you need finer control, you can use Bootstrap’s responsive font-size utility classes (.fs-*) to adjust the font size based on the screen width.

<h1 class="fs-1">Responsive Heading</h1>
<h2 class="fs-2">Smaller Heading on Larger Screens</h2>

Summary of Bootstrap Headings:

• Use standard heading tags (<h1> through <h6>) for basic headings.
• Use .h1 to .h6 utility classes to style non-heading elements like headings.
• Use display heading classes (.display-1 to .display-6) for large, impactful headings.
• Combine with utility classes like .text-center, .text-primary, or .text-muted to style headings.
• Include secondary text with <small> and apply Bootstrap's color or style utilities for a lighter look.