Heading classes in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a heading with Bootstrap class for the largest heading size.

Bootsrap

<h1 class="[1]">Welcome to Bootstrap</h1>

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

Ah6

Bdisplay-1

Clead

Dtext-muted

Attempts:

3 left

💡 Hint

Common Mistakes

Using heading tags like h6 as a class instead of Bootstrap display classes.

Using text utility classes like text-muted which only change color.

The display-1 class in Bootstrap styles the heading as the largest display heading.

2fill in blank

medium

Complete the code to create a smaller heading using Bootstrap's display classes.

Bootsrap

<h2 class="[1]">Subheading Example</h2>

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

Adisplay-4

Bdisplay-1

Cdisplay-6

Dlead

Attempts:

3 left

💡 Hint

Common Mistakes

Using display-6 which is the smallest display size.

Using lead which is for paragraph text, not headings.

The display-4 class styles the heading smaller than display-1 but still large.

3fill in blank

hard

Fix the error in the heading class to correctly apply Bootstrap's display style.

Bootsrap

<h3 class="[1]">Correct Heading</h3>

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

Adisplay1

Bdisplay-three

Cdisplay_3

Ddisplay-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using display1 without dash.

Using underscores or words instead of numbers.

The correct Bootstrap class uses a dash: display-3. Other options are invalid class names.

4fill in blank

hard

Fill both blanks to create a heading with Bootstrap display class and muted text color.

Bootsrap

<h4 class="[1] [2]">Muted Display Heading</h4>

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

Adisplay-5

Btext-muted

Cdisplay-2

Dtext-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-primary which colors text blue instead of muted gray.

Using two display classes together.

Use display-5 for heading size and text-muted for muted text color.

5fill in blank

hard

Fill all three blanks to create a heading with uppercase text, display class, and primary color.

Bootsrap

<h5 class="[1] [2] [3]">Uppercase Primary Heading</h5>

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

Atext-uppercase

Bdisplay-6

Ctext-primary

Dtext-lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lowercase instead of text-uppercase.

Mixing up display class numbers.

text-uppercase makes text uppercase, display-6 sets heading size, and text-primary colors text blue.