Display headings in Bootsrap - Browser Rendering Trace

Render Flow - Display headings

[Read <h1>] -> [Create H1 node] -> [Apply Bootstrap heading styles] -> [Render font size and weight] -> [Paint text on screen]

The browser reads the heading tag, creates the element, applies Bootstrap's heading styles which set font size and weight, then paints the styled text on the screen.

Render Steps - 4 Steps

Code Added:<h1 class="display-1">Display 1</h1>

Before

[ ]
(empty page)

→

After

[Display 1]
(very large text, boldness light)

Adding the h1 with display-1 class shows very large text because Bootstrap sets font-size to 6rem and font-weight to 300.

🔧 Browser Action:Creates H1 element, applies CSS styles, triggers layout and paint

Code Sample

This code shows four headings with Bootstrap display classes that make the text very large and light in weight.

Bootsrap

<h1 class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>
<h3 class="display-3">Display 3</h3>
<h4 class="display-4">Display 4</h4>

Bootsrap

.display-1 { font-size: 6rem; font-weight: 300; }
.display-2 { font-size: 5rem; font-weight: 300; }
.display-3 { font-size: 4rem; font-weight: 300; }
.display-4 { font-size: 3rem; font-weight: 300; }

Render Quiz - 3 Questions

After applying step 1, what is the font size and weight of the heading?

A 6rem font size, font-weight 300 (light)

B 2rem font size, font-weight 700 (bold)

C 4rem font size, font-weight 400 (normal)

D 1rem font size, font-weight 300 (light)

Common Confusions - 3 Topics

Why does the text look so light and not bold?

Bootstrap display classes set font-weight to 300, which is lighter than normal bold. This is intentional for a modern look.

💡 Display headings use light font weight by default, unlike normal headings.

Why is the font size so huge compared to normal headings?

Display classes use very large font sizes (3rem to 6rem) to create eye-catching titles, bigger than default heading sizes.

💡 Display classes scale font size up dramatically for emphasis.

What happens if I remove the display class but keep the h1 tag?

The heading will use the browser's default h1 size and weight, which is smaller and bolder than display classes.

💡 Display classes override default heading styles with bigger and lighter text.

Property Reference

Class	Font Size	Font Weight	Visual Effect	Common Use
.display-1	6rem	300	Very large, light heading	Main large titles
.display-2	5rem	300	Slightly smaller large heading	Secondary large titles
.display-3	4rem	300	Medium large heading	Subtitles or section titles
.display-4	3rem	300	Smaller large heading	Smaller section headings

Concept Snapshot

Bootstrap display headings use classes .display-1 to .display-4 They set very large font sizes from 6rem down to 3rem Font weight is light (300) for a modern look Used for big, eye-catching titles Overrides default heading sizes and weights