Display headings in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a heading with Bootstrap's largest heading style.

Bootsrap

<h[1] class="display-1">Welcome to Bootstrap</h[1]>

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

A1

B2

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a smaller heading tag like h4 with display-1 can cause inconsistent sizes.

Forgetting to close the heading tag properly.

The display-1 class is used with an <h1> tag to create the largest Bootstrap heading style.

2fill in blank

medium

Complete the code to create a medium-sized Bootstrap display heading.

Bootsrap

<h[1] class="display-4">Hello, Bootstrap!</h[1]>

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

A1

B2

C3

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using an invalid heading tag like h5 with display-4.

Mismatching opening and closing tags.

The display-4 class is typically used with an <h3> tag for a medium-sized display heading.

3fill in blank

hard

Fix the error in the code to properly display a Bootstrap heading with class display-3.

Bootsrap

<h[1] class="display-3">Bootstrap Heading</h2>

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

A2

B3

C4

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving mismatched tags causes rendering errors.

Using a heading tag that doesn't match the display class.

The opening and closing heading tags must match. Since the closing tag is </h2>, the opening tag should be <h2>. But to use display-3, the correct heading tag is <h3> and the closing tag should also be </h3>. Here, fixing the opening tag to h3 is the first step.

4fill in blank

hard

Fill both blanks to create a Bootstrap heading with class display-2 and correct closing tag.

Bootsrap

<h[1] class="display-2">Big Heading</h[2]>

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

A2

B3

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using different numbers for opening and closing tags.

Using a heading tag that doesn't match the display class.

The heading tag should be h2 to match the display-2 class. Both the opening and closing tags must be h2.

5fill in blank

hard

Fill all three blanks to create a Bootstrap heading with class display-5, correct tag, and closing tag.

Bootsrap

<h[1] class="display-5">Small Heading</h[2]><!-- Add a comment here -->
<!-- This is a [3] -->

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

A5

Ch5

Dheading

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatched opening and closing tags.

Incorrect comment text.

The heading tag should be h5 to match the display-5 class. The closing tag number must match the opening tag number. The comment describes the element as a 'heading'.