Heading classes in Bootsrap - Browser Rendering Trace

Render Flow - Heading classes

Load HTML document

↓

Parse <h1> to <h6> elements

↓

Apply Bootstrap heading classes .h1 to .h6

↓

Calculate font size and weight

↓

Render text with styles

↓

Paint on screen

The browser reads heading tags and applies Bootstrap's heading classes to style font size and weight, then paints the styled text on the screen.

Render Steps - 6 Steps

Code Added:<h1 class="h1">Heading 1</h1>

Before

[Empty page]

→

After

[ Heading 1 ]
(Font size large, medium weight)

Adding an h1 with class h1 shows large text styled by Bootstrap's .h1 class.

🔧 Browser Action:Creates DOM node, applies CSS styles, triggers layout and paint

Code Sample

Six headings styled with Bootstrap heading classes, each with decreasing font size and consistent medium weight.

Bootsrap

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

Bootsrap

.h1 { font-size: 2.5rem; font-weight: 500; }
.h2 { font-size: 2rem; font-weight: 500; }
.h3 { font-size: 1.75rem; font-weight: 500; }
.h4 { font-size: 1.5rem; font-weight: 500; }
.h5 { font-size: 1.25rem; font-weight: 500; }
.h6 { font-size: 1rem; font-weight: 500; }

Render Quiz - 3 Questions

After applying step 3, what is the visual difference between the three headings?

A Each heading is smaller than the one above it

B All headings have the same size but different colors

C Headings are the same size but different font weights

D Only the first heading is visible

Common Confusions - 3 Topics

Why does adding class .h1 to a <p> tag not make it behave exactly like an <h1>?

The .h1 class changes font size and weight but does not add semantic meaning or default margins of an <h1> tag. So visually it looks similar but screen readers and spacing differ.

💡 Use heading tags for meaning; classes only style appearance (see render_steps 1).

Why do all heading classes have the same font-weight even though sizes differ?

Bootstrap uses consistent medium font weight (500) for all heading classes to keep uniform boldness while only changing size for hierarchy.

💡 Size changes create hierarchy, weight stays consistent (see property_table).

Why does the spacing between headings differ even if they have the same class?

Default margins come from the HTML heading tags themselves, not the Bootstrap classes. So spacing depends on the tag, not just the class.

💡 Classes style font; tags control spacing (see render_steps).

Property Reference

Class	Font Size	Font Weight	Visual Effect	Common Use
.h1	2.5rem	500 (medium)	Largest heading size	Main page titles
.h2	2rem	500 (medium)	Second largest heading	Section titles
.h3	1.75rem	500 (medium)	Medium heading size	Subsection titles
.h4	1.5rem	500 (medium)	Smaller heading	Minor headings
.h5	1.25rem	500 (medium)	Small heading	Small section titles
.h6	1rem	500 (medium)	Smallest heading size	Least important headings

Concept Snapshot

Bootstrap heading classes (.h1 to .h6) style font size and weight for headings. They provide consistent medium font weight (500) and decreasing font sizes from 2.5rem to 1rem. Use heading tags (<h1> to <h6>) for semantic meaning and spacing. Classes control only visual size and weight. Ideal for consistent heading styles across your site.