Display headings in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual size of the heading?

Given this Bootstrap heading class, what size will the text appear as in the browser?

Bootsrap

<h1 class="display-4">Hello World</h1>

A Very large, bigger than normal h1 size

B Same size as a normal h1 element

C Smaller than a normal h1 element

D Invisible, no text shown

💡 Hint

Bootstrap display classes make headings larger than normal.

The class display-4 in Bootstrap makes the heading text very large, larger than the default h1 size.

❓ selector

intermediate

Which class makes a heading smaller in Bootstrap?

You want to make a heading smaller than the default h2 size using Bootstrap classes. Which class should you use?

A display-1

B lead

C display-6

D text-muted

💡 Hint

Display classes with higher numbers are smaller.

Bootstrap display-6 is the smallest display heading size, smaller than h2 by default.

❓ accessibility

advanced

How to make a heading accessible but visually hidden?

You want to include a heading for screen readers but hide it visually using Bootstrap. Which class should you add?

Bootsrap

<h2 class="???">Section Title</h2>

A sr-only

B d-none

C invisible

D visually-hidden

💡 Hint

Bootstrap 5 uses a specific class for screen-reader-only content.

The class visually-hidden hides content visually but keeps it accessible to screen readers.

❓ layout

advanced

How to center a heading horizontally using Bootstrap?

You want to center a heading horizontally inside its container using Bootstrap classes. Which class should you add?

Bootsrap

<h3 class="???">Centered Heading</h3>

A justify-content-center

B text-center

C mx-auto

D align-items-center

💡 Hint

Text alignment classes start with text- in Bootstrap.

The class text-center centers text horizontally inside its container.

🧠 Conceptual

expert

What is the difference between display-* classes and normal heading tags?

Which statement correctly explains the difference between Bootstrap's display classes (like display-1) and normal HTML heading tags (like h1)?

A Display classes change only the font size and weight but keep the semantic meaning of the heading tag.

B Display classes replace the heading tag with a div and remove semantic meaning.

C Display classes make the heading invisible but keep it in the DOM.

D Display classes automatically add ARIA roles to the heading.

💡 Hint

Bootstrap display classes style the heading but do not change its HTML tag.

Display classes only style the heading visually but keep the original HTML tag and its semantic meaning for accessibility.