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'.

Practice

1. What is the main purpose of using Bootstrap display heading classes like display-1 to display-4?

easy

A. To hide headings on small screens

B. To change the background color of headings

C. To add animations to headings

D. To make headings larger and more prominent on the page

Solution

1. Step 1: Understand Bootstrap display classes

   Bootstrap display classes like display-1 to display-4 are used to style headings with bigger and bolder text.

2. Step 2: Identify the purpose of these classes

   The main goal is to make headings stand out by increasing their size and weight, not to change colors or add animations.

3. Final Answer:

   To make headings larger and more prominent on the page -> Option D

4. Quick Check:

   Display classes = bigger, bold headings [OK]

Hint: Display classes make headings big and bold fast [OK]

Common Mistakes:

• Thinking display classes change colors
• Confusing display classes with animation classes
• Assuming display classes hide elements

2. Which of the following is the correct way to apply a Bootstrap display heading class to an <h1> tag?

easy

A. <h1>display-3 Title</h1>

B. <h1 display-3>Title</h1>

C. <h1 class="display-3">Title</h1>

D. <h1 class="title display3">Title</h1>

Solution

1. Step 1: Recall Bootstrap class syntax

   Bootstrap classes are added using the class attribute with the exact class name, e.g., class="display-3".

2. Step 2: Check each option for correct syntax

   <h1 class="display-3">Title</h1> uses class="display-3" correctly. Other options misuse attribute syntax or class names.

3. Final Answer:

   <h1 class="display-3">Title</h1> -> Option C

4. Quick Check:

   Use class="display-x" for display headings [OK]

Hint: Always use class="display-x" syntax for Bootstrap classes [OK]

Common Mistakes:

• Omitting the class attribute
• Writing class names without quotes
• Using incorrect attribute names

3. What will be the visual difference between these two headings in a Bootstrap page?

<h2 class="display-1">Big Heading</h2>
<h2>Normal Heading</h2>

medium

A. The 'Big Heading' text will be much larger and bolder than 'Normal Heading'.

B. Both headings will look the same size and weight.

C. 'Normal Heading' will be larger than 'Big Heading'.

D. 'Big Heading' will be hidden on small screens.

Solution

1. Step 1: Understand the effect of display-1 class

   The display-1 class makes text very large and bold compared to normal heading styles.

2. Step 2: Compare the two headings visually

   The first heading with display-1 will appear much bigger and bolder than the second heading without any display class.

3. Final Answer:

   The 'Big Heading' text will be much larger and bolder than 'Normal Heading'. -> Option A

4. Quick Check:

   display-1 = biggest heading style [OK]

Hint: Display-1 is the largest heading style in Bootstrap [OK]

Common Mistakes:

• Assuming display classes do not change size
• Thinking normal headings are bigger
• Confusing display classes with visibility classes

4. Identify the error in this Bootstrap heading code:

<h3 class="display5">Heading</h3>

medium

A. The <h3> tag cannot use display classes

B. The class name should be display-4 with a dash, not display5

C. The heading text must be inside a <div> to use display classes

D. The class attribute is missing quotes

Solution

1. Step 1: Check Bootstrap display class naming

   Bootstrap display classes use a dash, e.g., display-1, display-2, up to display-4. There is no display5 class.

2. Step 2: Identify the mistake in the code

   The code uses display5 without a dash, which is invalid and will not apply the style.

3. Final Answer:

   The class name should be display-4 with a dash, not display5 -> Option B

4. Quick Check:

   Display classes require dash, e.g., display-1 [OK]

Hint: Remember display classes have a dash: display-1, display-2, etc. [OK]

Common Mistakes:

• Omitting the dash in class names
• Thinking display classes only work on <h1>
• Missing quotes around class attribute

5. You want to create a page with a main heading that is very large and bold, and a subheading that is smaller but still styled with Bootstrap display classes. Which combination is correct?

hard

A. <h1 class="display-1">Main Title</h1> <h2 class="display-4">Sub Title</h2>

B. <h1 class="display-4">Main Title</h1> <h2 class="display-1">Sub Title</h2>

C. <h1>Main Title</h1> <h2>Sub Title</h2>

D. <h1 class="display-5">Main Title</h1> <h2 class="display-3">Sub Title</h2>

Solution

1. Step 1: Understand Bootstrap display class sizes

   Display classes range from display-1 (largest) to display-4 (smaller). There is no display-5.

2. Step 2: Choose correct class order for main and subheading

   Main heading should use display-1 for biggest size, subheading can use display-4 for smaller but styled text.

3. Step 3: Verify semantic tags and classes

   <h1 class="display-1">Main Title</h1> <h2 class="display-4">Sub Title</h2> uses correct classes and semantic tags. Other combinations either use non-existent classes like display-5, reverse the size order (smaller main heading with display-4, larger subheading with display-1), or omit display classes entirely.

4. Final Answer:

   <h1 class="display-1">Main Title</h1> <h2 class="display-4">Sub Title</h2> -> Option A

5. Quick Check:

   Main heading bigger with display-1, subheading smaller display-4 [OK]

Hint: Use display-1 for main, display-4 for subheading [OK]

Common Mistakes:

• Using display classes in wrong size order
• Using non-existent display-5 class
• Not applying display classes to subheading