Icon sizing and colors in Bootsrap - Mini Project: Build & Apply

Icon sizing and colors with Bootstrap

📖 Scenario: You are creating a simple webpage that shows icons with different sizes and colors using Bootstrap icons. This is useful for making buttons and menus look nice and clear.

🎯 Goal: Build a webpage that displays three Bootstrap icons: a house, a star, and a heart. Each icon should have a different size and color using Bootstrap classes.

📋 What You'll Learn

Use Bootstrap 5 icons from the official CDN

Display three icons: house, star, heart

Set icon sizes using Bootstrap size classes

Set icon colors using Bootstrap text color classes

Use semantic HTML and include accessibility labels

💡 Why This Matters

🌍 Real World

Icons are used everywhere on websites and apps to help users understand actions quickly. Knowing how to size and color icons properly improves user experience.

💼 Career

Web developers often use icon libraries like Bootstrap Icons to build attractive and accessible interfaces efficiently.

1

Set up the HTML skeleton and include Bootstrap icons

Create a basic HTML5 page with lang="en" and charset="UTF-8". Include the Bootstrap Icons CSS from the CDN link: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css. Inside the <body>, add a <main> element with an empty <section> where icons will go.

Bootsrap

    
    
    Bootstrap Icons Example
    


    
        
            
        
    

Hint

Remember to add the Bootstrap Icons CSS link inside the <head> section.

2

Add a configuration variable for icon size class

Inside the <section>, create a variable in a <script> tag called iconSizeClass and set it to "fs-3" which is a Bootstrap class for font size. This will be used to set icon sizes.

Bootsrap

    
    
    Bootstrap Icons Example
    


    
        
            
                // Create iconSizeClass variable here
            
            
        
    

Hint

Use const iconSizeClass = "fs-3"; inside a <script> tag.

3

Add three Bootstrap icons with different sizes and colors

Inside the <section> but outside the <script> tag, add three <i> elements with these classes and attributes:
1. House icon with classes bi-house, fs-1, and text-primary, and aria-label="Home icon"
2. Star icon with classes bi-star, fs-3, and text-warning, and aria-label="Star icon"
3. Heart icon with classes bi-heart, fs-5, and text-danger, and aria-label="Heart icon"

Bootsrap

    
    
    Bootstrap Icons Example
    


    
        
            
                const iconSizeClass = "fs-3";
            
            
        
    

Hint

Use <i> tags with the correct Bootstrap icon classes, size classes like fs-1, and color classes like text-primary. Add aria-label for accessibility.

4

Add a container and spacing for better layout

Wrap the <section> content inside a <div> with Bootstrap classes container and py-4 for padding. Also add the class me-3 (margin end) to each icon except the last to space them horizontally.

Bootsrap

    
    
    Bootstrap Icons Example
    


    
        
            
                
            
            
                const iconSizeClass = "fs-3";
            
        
    

Hint

Use a <div> with classes container py-4 around the icons. Add me-3 to the first two icons for 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