0
0
Bootsrapmarkup~20 mins

Heading classes in Bootsrap - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Bootstrap Heading Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate
2:00remaining
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>
AThe text will be medium, between h1 and h3 size.
BThe text will be very large, similar to a main page title.
CThe text will be invisible because display-1 hides it.
DThe text will be small, like a normal h3 heading.
Attempts:
2 left
💡 Hint
Bootstrap's display classes make text bigger than normal heading tags.
❓ selector
intermediate
2:00remaining
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?
Adisplay-3
Bdisplay-5
Cdisplay-1
Ddisplay-6
Attempts:
2 left
💡 Hint
Display classes go from display-1 (largest) to display-4 (smallest).
🧠 Conceptual
advanced
2:00remaining
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>
AThe text size will be from display-4 because it comes last and overrides display-2.
BThe text size will be from display-2 because it comes first and overrides display-4.
CThe text will not show because multiple display classes cause a conflict.
DThe text size will be a mix of display-2 and display-4 styles.
Attempts:
2 left
💡 Hint
In CSS, when multiple classes of equal specificity set the same property, the one declared later in the stylesheet wins.
❓ accessibility
advanced
2:00remaining
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&lt;h1 class="display-3"&gt;Big Heading&lt;/h1&gt;
B&lt;div class="display-1" role="heading" aria-level="3"&gt;Big Heading&lt;/div&gt;
C&lt;h3 class="display-1"&gt;Big Heading&lt;/h3&gt;
D&lt;h3 style="font-size: 3rem;"&gt;Big Heading&lt;/h3&gt;
Attempts:
2 left
💡 Hint
Use semantic heading tags with display classes for best accessibility.
📝 Syntax
expert
2:00remaining
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>
ARuntime error in browser console about unknown class.
BSyntaxError because display-7 is not a valid class name.
CThe heading will be hidden because display-7 sets display:none.
DNo error, but display-7 is not defined so no size change happens.
Attempts:
2 left
💡 Hint
Bootstrap defines display-1 to display-4 only.