Icon sizing and colors in Bootsrap - Browser Rendering Trace

Render Flow - Icon sizing and colors

Load HTML with icon element

↓

Apply Bootstrap icon classes

↓

Apply sizing classes (e.g., fs-1, fs-3)

↓

Apply color utility classes (e.g., text-primary)

↓

Browser calculates size and color

↓

Paint icon with new size and color

The browser reads the icon element, applies Bootstrap's sizing and color classes, calculates the final size and color, then paints the icon accordingly.

Render Steps - 3 Steps

Code Added:<i class="bi bi-star" aria-label="Star icon"></i>

Before

[ ]

→

After

[★]

Adding the icon element shows a default sized star icon in black.

🔧 Browser Action:Creates DOM node and applies default icon font styles

Code Sample

A star icon from Bootstrap Icons displayed large and colored yellow.

Bootsrap

<i class="bi bi-star fs-1 text-warning" aria-label="Star icon"></i>

Render Quiz - 3 Questions

After applying step 2 (fs-1), what visual change do you see?

A The icon becomes larger

B The icon changes color

C The icon disappears

D The icon rotates

Common Confusions - 2 Topics

Why doesn't changing font-size in CSS affect the icon size?

Bootstrap icons rely on font size, but if you override with a class like fs-1, it sets font-size with !important, so plain CSS font-size may be ignored.

💡 Use Bootstrap sizing classes (fs-1, fs-2) to reliably change icon size.

Why is my icon color not changing when I add a text color class?

If the icon uses SVG or image instead of font icons, text color classes won't affect it. Bootstrap Icons are font-based, so text color works only on font icons.

💡 Ensure you use font-based icons to apply text color classes.

Property Reference

Class	Type	Effect	Visual Result	Common Use
bi bi-star	Icon class	Displays star icon	Shows star shape	Add icon graphics
fs-1	Sizing utility	Font size large	Icon becomes bigger	Make icons larger
fs-3	Sizing utility	Font size medium	Icon medium sized	Standard icon size
text-primary	Color utility	Changes text color	Icon colored blue	Highlight with primary color
text-warning	Color utility	Changes text color	Icon colored yellow	Show warning or highlight

Concept Snapshot

Bootstrap icons use font classes like bi-star to show icons. Use fs-1, fs-2, etc. classes to change icon size. Use text-primary, text-warning, etc. to change icon color. Icons are font-based, so sizing and color come from font and text styles. Always include aria-label for accessibility.

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