Icon sizing and colors in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a small Bootstrap icon.

Bootsrap

<i class="bi bi-alarm [1]"></i>

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

Afs-3

Bfs-6

Cfs-2

Dfs-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using fs-1 or fs-2 which are larger sizes.

Not adding any size class, so icon stays default size.

The class 'fs-6' makes the icon small in Bootstrap's font size scale.

2fill in blank

medium

Complete the code to color the icon red using Bootstrap text color classes.

Bootsrap

<i class="bi bi-heart [1]"></i>

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

Atext-danger

Btext-primary

Ctext-success

Dtext-info

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-primary' which is blue.

Using 'text-success' which is green.

The class 'text-danger' applies a red color in Bootstrap.

3fill in blank

hard

Fix the error in the code to make the icon large and blue.

Bootsrap

<i class="bi bi-star [1] text-primary"></i>

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

Afs-7

Bfs-0

Cfs-5

Dfs-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using fs-0 or fs-7 which are invalid classes.

Not adding any size class, so icon stays default size.

The class 'fs-5' makes the icon large; fs-0 and fs-7 do not exist in Bootstrap.

4fill in blank

hard

Fill both blanks to create a medium-sized green icon.

Bootsrap

<i class="bi bi-check-circle [1] [2]"></i>

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

Afs-4

Btext-success

Ctext-danger

Dfs-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-danger' which is red instead of green.

Using very large or very small font size classes.

Use 'fs-4' for medium size and 'text-success' for green color in Bootstrap.

5fill in blank

hard

Fill all three blanks to create a large, blue icon with extra spacing.

Bootsrap

<i class="bi bi-cloud-upload [1] [2] [3]"></i>

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

Afs-1

Btext-primary

Cme-3

Dtext-warning

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-warning' which is yellow instead of blue.

Not adding spacing class, so icon is too close to other elements.

Use 'fs-1' for largest size, 'text-primary' for blue color, and 'me-3' for right margin spacing.

Practice

1. Which Bootstrap class controls the size of an icon?

easy

A. fs-* classes

B. icon-size-* classes

C. size-icon-* classes

D. icon-fs-* classes

Solution

1. Step 1: Understand Bootstrap icon sizing

   Bootstrap uses fs-* classes to control font size, which affects icon size.

2. Step 2: Identify correct class pattern

   The correct pattern is fs-*, where * is a number like 1, 2, 3, etc.

3. Final Answer:

   <code>fs-*</code> classes -> Option A

4. Quick Check:

   Icon size = fs-* classes [OK]

Hint: Remember: fs-* means font size in Bootstrap [OK]

Common Mistakes:

• Confusing icon size classes with color classes
• Using non-existent class names like icon-size-*
• Thinking size is controlled by icon-fs-*

2. Which class would you use to make a Bootstrap icon have a medium font size?

easy

A. fs-6

B. fs-1

C. fs-3

D. fs-0

Solution

1. Step 1: Recall Bootstrap font size scale

   Bootstrap font sizes range from fs-1 (largest) to fs-6 (smallest).

2. Step 2: Identify medium size

   fs-3 is roughly in the middle, so it represents medium size.

3. Final Answer:

   fs-3 -> Option C

4. Quick Check:

   Medium size = fs-3 [OK]

Hint: fs-1 is largest, fs-6 smallest; middle is fs-3 [OK]

Common Mistakes:

• Choosing fs-1 thinking it's medium
• Using fs-0 which does not exist
• Confusing fs-6 as medium size

3. What color will the icon have with this class: text-danger?

medium

A. Red

B. Blue

C. Green

D. Gray

Solution

1. Step 1: Understand Bootstrap text color classes

   Bootstrap uses semantic color classes like text-danger for red color.

2. Step 2: Match class to color

   text-danger applies a red color to text or icons.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   text-danger = red color [OK]

Hint: Danger means red in Bootstrap colors [OK]

Common Mistakes:

• Thinking text-danger is blue
• Confusing text-success with text-danger
• Assuming text-danger is gray

4. You want a large green icon but your code is: <i class='bi bi-check fs-1 text-successs'></i>. What is the problem?

medium

A. fs-1 is not a valid size class

B. Wrong icon name bi-check

C. Missing aria-label attribute

D. Misspelled color class text-successs

Solution

1. Step 1: Check class names for typos

   The color class text-successs has an extra 's' and is invalid.

2. Step 2: Confirm other classes

   bi-check is a valid icon, fs-1 is valid for large size, aria-label is optional but recommended.

3. Final Answer:

   Misspelled color class <code>text-successs</code> -> Option D

4. Quick Check:

   Check spelling of color classes [OK]

Hint: Check spelling of Bootstrap classes carefully [OK]

Common Mistakes:

• Ignoring typos in class names
• Assuming fs-1 is invalid
• Forgetting aria-label but thinking it's an error

5. You want to create a blue icon with medium size and accessible label "Info icon". Which code is correct?

hard

A. <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i>

B. <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

C. <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i>

D. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

Solution

1. Step 1: Check icon name and size

   bi-info-circle is correct icon name; fs-3 is medium size.

2. Step 2: Verify color and accessibility

   text-primary is blue color; aria-label='Info icon' provides accessible label.

3. Step 3: Review other options

   <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i> uses fs-5 (small size) and text-info (lighter blue). <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i> misses accessible label and uses aria-hidden. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> misses bi class prefix.

4. Final Answer:

   <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> -> Option B

5. Quick Check:

   Correct icon, size, color, and aria-label [OK]

Hint: Use bi + fs-* + text-* + aria-label for accessible icons [OK]

Common Mistakes:

• Missing bi prefix on icon class
• Using wrong size or color classes
• Forgetting aria-label for accessibility