Heading classes in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Bootstrap heading classes like .h1 to .h6?

Bootstrap heading classes <code>.h1</code> to <code>.h6</code> let you style any element with the look and size of HTML headings <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> without changing the element's semantic meaning.

beginner

How do you apply a Bootstrap heading class to a paragraph to make it look like a heading?

Add the class h1 (or any heading level) to the paragraph tag, like <p class="h1">Text</p>. This styles the paragraph text like a heading but keeps it semantically a paragraph.

beginner

True or False: Using Bootstrap heading classes changes the HTML element's semantic meaning.

False. Bootstrap heading classes only change the visual style, not the semantic meaning of the element.

beginner

Which Bootstrap class would you use to style text like an <code>&lt;h3&gt;</code> heading?

Use the class h3 to style text like an <h3> heading.

intermediate

Why might you use Bootstrap heading classes on non-heading elements?

You might want to keep the correct HTML structure for accessibility or SEO but still want the text to look like a heading. Using heading classes lets you do that without changing the element type.

What does the Bootstrap class .h2 do?

A Changes the element to an <code>&lt;h2&gt;</code> tag

B Styles text to look like an <code>&lt;h2&gt;</code> heading

C Makes text bold only

D Adds a border around the text

The .h2 class styles text to look like an <h2> heading but does not change the element type.

Which HTML element is best to keep semantic meaning when using Bootstrap heading classes?

A Any element with heading class

B <code>&lt;div&gt;</code> with heading class

C <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> tags

D <code>&lt;p&gt;</code> with heading class

For semantic meaning, use actual heading tags <h1> to <h6>. Heading classes are for styling when you want to keep other elements.

If you want a paragraph to look like a small heading, which class should you use?

A .h1

B .lead

C .small

D .h6

The .h6 class styles text like the smallest heading <h6>.

Does applying a Bootstrap heading class affect screen readers' interpretation of the element?

A No, it only changes visual style

B No, it adds ARIA roles automatically

C Yes, it hides the element

D Yes, it changes the element role

Bootstrap heading classes only change how text looks visually; screen readers read the element as it is in HTML.

Which is a good reason to use heading classes on a <span> element?

A To keep inline text styled like a heading

B To make the span a block element

C To add margin and padding automatically

D To change the font family

Using heading classes on a <span> lets you style inline text like a heading without changing layout.

Explain how Bootstrap heading classes help separate content structure from visual style.

Think about why you might want a paragraph to look like a heading but still be a paragraph.

Describe a scenario where using Bootstrap heading classes on a non-heading element is beneficial.

Consider accessibility and SEO best practices.