Icon sizing and colors in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What size will this Bootstrap icon appear?

Given the following HTML code using Bootstrap icons, what will be the visual size of the icon in the browser?

Bootsrap

<i class="bi bi-alarm" style="font-size: 3rem;"></i>

A The icon will be 1rem in size because Bootstrap overrides inline styles.

B The icon will be the default size because inline styles do not affect Bootstrap icons.

C The icon will be 3 times the root font size (3rem), making it large.

D The icon will be invisible because the style is invalid.

💡 Hint

Remember that inline styles with font-size affect icon size.

Bootstrap icons inherit font size from their container or inline styles. Setting font-size: 3rem makes the icon three times the root font size, so it appears large.

❓ selector

intermediate

Which CSS selector changes only the color of Bootstrap icons inside buttons?

You want to change the color of all Bootstrap icons that are inside

A .bi button { color: red; }

B .bi > button { color: red; }

C button.bi { color: red; }

D button .bi { color: red; }

💡 Hint

Think about selecting icons inside buttons, not buttons inside icons.

The selector 'button .bi' targets elements with class 'bi' that are descendants of

🧠 Conceptual

advanced

Why might a Bootstrap icon not change color when you apply a CSS color property?

You apply 'color: green;' to a Bootstrap icon element, but the icon color does not change. What is the most likely reason?

A The icon uses an SVG with fixed fill color that ignores the CSS color property.

B Bootstrap icons cannot have their color changed by CSS.

C The CSS color property only affects text, not icons.

D The icon is inside a disabled button, so styles do not apply.

💡 Hint

Consider how SVG icons handle colors differently than fonts.

Bootstrap icons are SVGs that may have a fixed fill color. The CSS 'color' property affects font icons but not SVG fill unless the SVG uses 'currentColor' for fill.

❓ layout

advanced

How to vertically center a Bootstrap icon next to text inside a button?

You have a button with text and a Bootstrap icon side by side. The icon appears slightly off vertically. Which CSS approach best centers the icon vertically with the text?

Bootsrap

<button class="btn btn-primary"><i class="bi bi-star"></i> Favorite</button>

A Use 'display: flex; align-items: center;' on the button.

B Add 'vertical-align: middle;' to the icon only.

C Set 'line-height' on the button to 0.

D Wrap the icon in a <div> with 'position: absolute; top: 50%;'.

💡 Hint

Flexbox is great for aligning items vertically.

Setting the button to 'display: flex' and 'align-items: center' aligns the icon and text vertically in the center, fixing the offset.

❓ accessibility

expert

How to make a Bootstrap icon accessible for screen readers when it conveys meaning?

You use a Bootstrap icon as a button to submit a form. The icon alone has no text. What is the best way to make this icon accessible to screen readers?

Bootsrap

<button type="submit" class="btn btn-success"><i class="bi bi-check-lg"></i></button>

A No changes needed; screen readers read icons automatically.

B Add 'aria-label="Submit form"' to the button element.

C Add a <span> with 'display:none' containing the text inside the button.

D Add 'alt="Submit"' attribute to the <i> icon element.

💡 Hint

Screen readers need descriptive labels on interactive elements.

Adding 'aria-label' to the button gives screen readers a text description of the button's purpose, making the icon accessible.

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