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.