Lead paragraphs in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a lead paragraph using Bootstrap.

Bootsrap

<p class="[1]">This is an important lead paragraph that stands out.</p>

Drag options to blanks, or click blank then click option'

Alead

Blead-paragraph

Clead-text

Dtext-lead

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'text-lead' or 'lead-text'.

Forgetting to add the class attribute.

Bootstrap uses the class lead to style lead paragraphs with larger font and lighter weight.

2fill in blank

medium

Complete the code to add a lead paragraph inside a Bootstrap container.

Bootsrap

<div class="container">
  <p class="[1]">Welcome to our website! This is a lead paragraph.</p>
</div>

Drag options to blanks, or click blank then click option'

Atext-lead

Blead-text

Clead

Dlead-paragraph

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like 'lead-text'.

Adding extra words to the class name.

The correct Bootstrap class for lead paragraphs is lead, even inside containers.

3fill in blank

hard

Fix the error in the code to properly display a lead paragraph with Bootstrap.

Bootsrap

<p class="[1]">This paragraph should be styled as a lead.</p>

Drag options to blanks, or click blank then click option'

Alead-text

Btext-lead

Clead-paragraph

Dlead

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or made-up class names.

Misspelling the class name.

Only the class lead correctly applies Bootstrap's lead paragraph style.

4fill in blank

hard

Fill both blanks to create a lead paragraph inside a Bootstrap section with padding.

Bootsrap

<section class="[1]">
  <p class="[2]">This is a lead paragraph inside a padded section.</p>
</section>

Drag options to blanks, or click blank then click option'

Ap-4

Blead

Csection-padding

Dlead-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like 'section-padding'.

Confusing padding classes with text classes.

Use p-4 for padding on the section and lead for the lead paragraph style.

5fill in blank

hard

Fill all three blanks to create a responsive lead paragraph inside a Bootstrap container with margin and text color.

Bootsrap

<div class="container [1]">
  <p class="[2] [3]">This lead paragraph is styled with margin and color.</p>
</div>

Drag options to blanks, or click blank then click option'

Amt-5

Blead

Ctext-primary

Dmb-3

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing margin classes or using wrong text color classes.

Forgetting to add the lead class.

Use mt-5 for top margin on the container, lead for the paragraph style, and text-primary for blue text color.

Practice

1. What is the main purpose of using class="lead" on a paragraph in Bootstrap?

easy

A. To make the paragraph text larger and lighter for emphasis

B. To add a background color to the paragraph

C. To underline the paragraph text

D. To make the paragraph text bold and uppercase

Solution

1. Step 1: Understand the role of class="lead"

   This class is designed to highlight important paragraphs by making the text bigger and lighter.

2. Step 2: Compare with other styling options

   Other options like background color, underline, or bold uppercase are not the default behavior of lead.

3. Final Answer:

   To make the paragraph text larger and lighter for emphasis -> Option A

4. Quick Check:

   Lead paragraphs emphasize text by size and weight = A [OK]

Hint: Lead class makes text bigger and lighter for emphasis [OK]

Common Mistakes:

• Thinking it adds background color
• Confusing with bold or underline styles
• Using it on non-paragraph elements

2. Which of the following is the correct syntax to create a lead paragraph in Bootstrap?

easy

A. This is a lead paragraph.

B. This is a lead paragraph.

C. This is a lead paragraph.

D. This is a lead paragraph.

Solution

1. Step 1: Recall Bootstrap class usage

   Bootstrap uses standard HTML tags with classes, so class="lead" on a <p> tag is correct.

2. Step 2: Identify invalid syntax

   Tags like <lead> do not exist, and attributes like lead without class or wrong class names are invalid.

3. Final Answer:

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

4. Quick Check:

   Use class="lead" on <p> = B [OK]

Hint: Use <p> with class="lead" for correct syntax [OK]

Common Mistakes:

• Using non-existent <lead> tag
• Omitting class attribute
• Using wrong class names like lead-text

3. What will be the visual difference when viewing this HTML in a browser?

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

medium

A. Both paragraphs look the same with normal size and weight

B. The lead paragraph text is larger and lighter than the normal paragraph

C. The lead paragraph text is smaller and bold compared to the normal paragraph

D. The lead paragraph text is underlined and italicized

Solution

1. Step 1: Identify default paragraph styling

   Normal paragraphs have standard font size and weight.

2. Step 2: Understand Bootstrap lead class effect

   The lead class makes text bigger and lighter to stand out visually.

3. Final Answer:

   The lead paragraph text is larger and lighter than the normal paragraph -> Option B

4. Quick Check:

   Lead class changes size and weight = A [OK]

Hint: Lead class makes paragraph bigger and lighter visually [OK]

Common Mistakes:

• Expecting underline or italic styles
• Thinking lead text is smaller or bold
• Assuming no visual difference

4. You wrote this code but the lead paragraph does not appear different:

<p class="lead">Important text here.</p>

What is the most likely reason?

medium

A. The lead class requires JavaScript to work

B. The lead class only works on headings, not paragraphs

C. You forgot to include the Bootstrap CSS file in your HTML

D. You need to add style="font-weight:bold" manually

Solution

1. Step 1: Check Bootstrap dependency

   The lead class styling comes from Bootstrap CSS, so it requires the CSS file to be linked.

2. Step 2: Eliminate other options

   The class works on paragraphs, does not need JavaScript, and does not require manual bold styling.

3. Final Answer:

   You forgot to include the Bootstrap CSS file in your HTML -> Option C

4. Quick Check:

   Bootstrap CSS missing = no lead style [OK]

Hint: Always include Bootstrap CSS for styles to apply [OK]

Common Mistakes:

• Assuming lead class needs JavaScript
• Thinking lead only works on headings
• Trying to add styles manually instead of linking CSS

5. You want to highlight only one paragraph on a page as a lead paragraph but keep the rest normal. Which is the best practice?

hard

A. Add class="lead" only to the important paragraph and leave others normal

B. Add class="lead" to all paragraphs for consistency

C. Use inline styles to make all paragraphs bigger and lighter

D. Wrap all paragraphs in a <div class="lead"> container

Solution

1. Step 1: Understand lead paragraph purpose

   Lead paragraphs are meant to highlight important text, so use sparingly.

2. Step 2: Choose correct usage

   Applying class="lead" only to the important paragraph keeps the page clear and easy to read.

3. Final Answer:

   Add class="lead" only to the important paragraph and leave others normal -> Option A

4. Quick Check:

   Use lead class sparingly on key paragraphs = D [OK]

Hint: Use lead class only on key paragraphs for clarity [OK]

Common Mistakes:

• Applying lead class to all paragraphs
• Using inline styles instead of Bootstrap classes
• Wrapping paragraphs incorrectly in lead containers