Why Icon sizing and colors in Bootsrap? - Purpose & Use Cases

The Big Idea

Discover how a few simple classes can transform your icons from messy to perfect in seconds!

The Scenario

Imagine you want to add icons to your website buttons and menus. You pick icons from different sources and try to make them look good by changing their size and color manually using images or custom CSS.

The Problem

Manually resizing and coloring icons is slow and tricky. You might end up with inconsistent sizes, colors that don't match your design, or icons that look blurry or pixelated on different screens.

The Solution

Bootstrap provides easy classes to control icon sizes and colors consistently. You just add simple classes to your icons, and they automatically adjust to the right size and color that fits your design perfectly.

Before vs After

✗ Before

<i class="icon-star" style="width: 20px; height: 20px; color: red;"></i>

✓ After

<i class="bi bi-star fs-3 text-danger"></i>

What It Enables

This lets you quickly and reliably style icons across your whole site, keeping everything neat, consistent, and visually appealing without extra hassle.

Real Life Example

Think about a shopping site where the cart icon changes size on mobile and desktop and turns red when items are added. Using Bootstrap's icon sizing and color classes makes this easy and smooth.

Key Takeaways

Manual icon styling is slow and inconsistent.

Bootstrap classes simplify icon sizing and coloring.

Consistent, responsive icons improve user experience.

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