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.

Practice

1. Which Bootstrap class would you use to create the largest display heading?

easy

A. lead

B. display-4

C. h1

D. display-1

Solution

1. Step 1: Understand Bootstrap display classes

   Bootstrap provides display classes from display-1 to display-4, where display-1 is the largest size.

2. Step 2: Identify the largest display class

   Among the options, display-1 is the biggest heading style.

3. Final Answer:

   display-1 -> Option D

4. Quick Check:

   Largest display heading = display-1 [OK]

Hint: Remember display-1 is biggest, display-4 is smallest [OK]

Common Mistakes:

• Confusing h1 tag with Bootstrap display classes
• Choosing display-4 thinking higher number means bigger
• Using lead which styles paragraphs, not headings

2. Which of the following is the correct way to apply a Bootstrap display heading class to an h2 element?

easy

A. <h2 class='display-2'>Hello</h2>

B. <h2 display-2>Hello</h2>

C. <h2 class='display2'>Hello</h2>

D. <h2 class='display-5'>Hello</h2>

Solution

1. Step 1: Check correct class syntax

   Bootstrap display classes use the format display-1 to display-4 and must be added inside the class attribute.

2. Step 2: Validate each option

   <h2 class='display-2'>Hello</h2> uses class='display-2' correctly. <h2 display-2>Hello</h2> misses class=. <h2 class='display2'>Hello</h2> uses wrong class name display2. <h2 class='display-5'>Hello</h2> uses invalid class display-5 which doesn't exist.

3. Final Answer:

   <h2 class='display-2'>Hello</h2> -> Option A

4. Quick Check:

   Use class='display-x' with x from 1 to 4 [OK]

Hint: Always put display class inside class attribute with dash [OK]

Common Mistakes:

• Forgetting to use class attribute
• Using wrong class names without dash
• Using non-existent display classes like display-5

3. What will be the visual difference when using <h3 class='display-3'>Title</h3> compared to <h3>Title</h3> in Bootstrap?

medium

A. There will be no visual difference.

B. The text will be larger and bolder with display-3 class.

C. The text will be smaller and lighter with display-3 class.

D. The text will be italicized with display-3 class.

Solution

1. Step 1: Understand Bootstrap display classes effect

   Display classes increase font size and weight to make headings stand out more than default heading tags.

2. Step 2: Compare default h3 with display-3

   Using display-3 on h3 makes the text bigger and bolder than the normal h3 style.

3. Final Answer:

   The text will be larger and bolder with display-3 class. -> Option B

4. Quick Check:

   Display classes enlarge and bold headings [OK]

Hint: Display classes make headings bigger and bolder [OK]

Common Mistakes:

• Thinking display classes make text smaller
• Assuming no style change happens
• Confusing display classes with italic or color styles

4. Identify the error in this code snippet: <h1 class='display-5'>Welcome</h1>

medium

A. The h1 tag cannot have classes.

B. The class name should be display_5 with underscore.

C. The class display-5 does not exist in Bootstrap.

D. The text 'Welcome' should be inside a span.

Solution

1. Step 1: Verify Bootstrap display classes range

   Bootstrap display classes only go from display-1 to display-4. There is no display-5.

2. Step 2: Check other options for validity

   The h1 tag cannot have classes. is false because h1 can have classes. The class name should be display_5 with underscore. is incorrect because Bootstrap uses dashes, not underscores. The text 'Welcome' should be inside a span. is unnecessary; text can be directly inside h1.

3. Final Answer:

   The class display-5 does not exist in Bootstrap. -> Option C

4. Quick Check:

   Display classes only from display-1 to display-4 [OK]

Hint: Check Bootstrap docs for valid display class numbers [OK]

Common Mistakes:

• Using non-existent display classes like display-5
• Thinking class names can have underscores
• Believing headings can't have classes

5. You want a heading that is visually large using Bootstrap but semantically an h4 for accessibility. Which is the best way to do this?

hard

A. <h4 class='display-1'>Big Heading</h4>

B. <h1 class='display-4'>Big Heading</h1>

C. <div class='display-1'>Big Heading</div>

D. <h4 style='font-size: 3rem;'>Big Heading</h4>

Solution

1. Step 1: Understand semantic vs visual roles

   For accessibility, the heading tag (h4) should reflect the document structure. Visual size can be changed with Bootstrap classes.

2. Step 2: Evaluate options for semantic correctness and styling

   <h4 class='display-1'>Big Heading</h4> keeps h4 semantic tag and applies display-1 for large style. <h1 class='display-4'>Big Heading</h1> uses h1 which changes semantics. <div class='display-1'>Big Heading</div> uses div which is not semantic heading. <h4 style='font-size: 3rem;'>Big Heading</h4> uses inline style, not Bootstrap class.

3. Final Answer:

   <h4 class='display-1'>Big Heading</h4> -> Option A

4. Quick Check:

   Use semantic tag + display class for size [OK]

Hint: Use heading tag for structure, display class for size [OK]

Common Mistakes:

• Changing heading tag to bigger one for size
• Using non-semantic tags for headings
• Relying on inline styles instead of Bootstrap classes