Heading classes in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual size of this heading?

Given this HTML code using Bootstrap classes, what will be the size of the heading text shown in the browser?

<h3 class="display-1">Hello</h3>

Bootsrap

<h3 class="display-1">Hello</h3>

A The text will be medium, between h1 and h3 size.

B The text will be very large, similar to a main page title.

C The text will be invisible because display-1 hides it.

D The text will be small, like a normal h3 heading.

💡 Hint

Bootstrap's display classes make text bigger than normal heading tags.

The class display-1 in Bootstrap makes text very large, bigger than normal h1 to h6 headings. Even if used on an h3 tag, the text size changes to display-1 style.

❓ selector

intermediate

Which class makes a heading smaller than display-1 but bigger than display-4?

In Bootstrap, which class should you add to a heading to make it appear smaller than display-1 but bigger than display-4?

A display-3

B display-5

C display-1

D display-6

💡 Hint

Display classes go from display-1 (largest) to display-4 (smallest).

display-3 is smaller than display-1 and display-2 but bigger than display-4. So it fits between display-1 and display-4 sizes.

🧠 Conceptual

advanced

What happens if you use multiple display classes on one heading?

Consider this HTML:

<h2 class="display-2 display-4">Test</h2>

What will be the size of the heading text?

Bootsrap

<h2 class="display-2 display-4">Test</h2>

A The text size will be from display-4 because it comes last and overrides display-2.

B The text size will be from display-2 because it comes first and overrides display-4.

C The text will not show because multiple display classes cause a conflict.

D The text size will be a mix of display-2 and display-4 styles.

💡 Hint

In CSS, when multiple classes of equal specificity set the same property, the one declared later in the stylesheet wins.

In the CSS cascade, rules with equal specificity later in the stylesheet override earlier ones. Bootstrap's stylesheet defines .display-4 after .display-2, so display-4's styles override.

❓ accessibility

advanced

Which heading class combination is best for screen readers and visual hierarchy?

You want a heading that looks very large visually but is still an h3 for screen readers and SEO. Which is the best HTML code?

A <h1 class="display-3">Big Heading</h1>

B <div class="display-1" role="heading" aria-level="3">Big Heading</div>

C <h3 class="display-1">Big Heading</h3>

D <h3 style="font-size: 3rem;">Big Heading</h3>

💡 Hint

Use semantic heading tags with display classes for best accessibility.

Using an h3 tag with display-1 class keeps the semantic heading level for screen readers and SEO, while making it visually large.

📝 Syntax

expert

What error occurs with this Bootstrap heading class usage?

What error or problem will this code cause?

<h4 class="display-7">Oops</h4>

Bootsrap

<h4 class="display-7">Oops</h4>

A Runtime error in browser console about unknown class.

B SyntaxError because display-7 is not a valid class name.

C The heading will be hidden because display-7 sets display:none.

D No error, but display-7 is not defined so no size change happens.

💡 Hint

Bootstrap defines display-1 to display-4 only.

Bootstrap does not define display-7 class, so it has no effect. The heading shows with normal h4 size.

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