Lead paragraphs in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual effect of the .lead class in Bootstrap?

Look at the following HTML snippet using Bootstrap classes:

<p class="lead">This is a lead paragraph.</p>

What will the paragraph look like compared to a normal paragraph?

Bootsrap

<p class="lead">This is a lead paragraph.</p>

A The text will be larger and slightly lighter in weight than normal paragraphs.

B The text will be hidden from view.

C The text will be smaller and italicized.

D The text will be bold and underlined.

💡 Hint

Think about how Bootstrap styles important introductory text.

The .lead class in Bootstrap makes paragraph text larger and lighter to highlight it as an introductory or important paragraph.

🧠 Conceptual

intermediate

Why use a lead paragraph in a webpage?

Which of the following best explains the purpose of a lead paragraph styled with Bootstrap's .lead class?

A To add navigation links at the top of the page.

B To create a footer section with copyright information.

C To highlight important introductory text that summarizes the content.

D To insert a hidden message for screen readers only.

💡 Hint

Think about what a 'lead' paragraph means in writing.

A lead paragraph introduces the main idea or summary of the content, making it stand out for readers.

❓ selector

advanced

Which CSS selector targets only paragraphs with the Bootstrap .lead class?

You want to write custom CSS that changes the color of only lead paragraphs in Bootstrap. Which selector should you use?

A .lead p

B #lead

C p .lead

D p.lead

💡 Hint

Remember how CSS selectors combine element names and classes.

The selector p.lead targets all <p> elements with the class lead. Other options select different elements or IDs.

❓ layout

advanced

How does the .lead class affect paragraph spacing in Bootstrap?

Consider two paragraphs, one with .lead and one without. How does Bootstrap's .lead class affect vertical spacing around the paragraph?

Bootsrap

<p class="lead">Lead paragraph text.</p>
<p>Normal paragraph text.</p>

A The lead paragraph has the same bottom margin as a normal paragraph.

B The lead paragraph has no margin, making it stick to other elements.

C The lead paragraph has extra padding inside the paragraph.

D The lead paragraph floats to the right side of the container.

💡 Hint

Check Bootstrap's default spacing for lead paragraphs.

Bootstrap's .lead class does not change the bottom margin; lead paragraphs have the same vertical spacing as normal paragraphs.

❓ accessibility

expert

What accessibility benefit does using a .lead paragraph provide?

When using Bootstrap's .lead class for paragraphs, which accessibility advantage is true?

A It automatically adds ARIA roles to the paragraph for screen readers.

B It visually emphasizes important text, helping users quickly find key information.

C It hides the paragraph from keyboard navigation to reduce clutter.

D It changes the paragraph to a heading level for better structure.

💡 Hint

Think about how visual styling helps all users, including those with cognitive disabilities.

The .lead class improves visual hierarchy, making important text easier to spot, which benefits all users including those with accessibility needs.