Bootstrap Icons library setup - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How to include Bootstrap Icons in your HTML?

Which of the following is the correct way to add Bootstrap Icons to your webpage using a CDN link?

A <style>@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');</style>

B <script src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.js"></script>

C <link rel="icon" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

D <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

💡 Hint

Think about how CSS files are linked in HTML.

The Bootstrap Icons library is a CSS file that needs to be linked using a <link> tag with rel="stylesheet". Option D correctly uses this method.

Option D tries to load a JavaScript file which does not exist for Bootstrap Icons.

Option D uses rel="icon" which is for favicons, not stylesheets.

Option D uses an inline style import which is valid CSS but not the recommended or standard way to include external CSS libraries in HTML.

📝 Syntax

intermediate

Correct usage of Bootstrap Icon in HTML

Which of the following HTML snippets correctly displays a Bootstrap icon for a heart?

A <i class="bi bi-heart"></i>

B <icon name="heart" class="bi"></icon>

C <span class="icon-heart"></span>

D <svg class="bi-heart"></svg>

💡 Hint

Bootstrap Icons use specific class names starting with 'bi'.

Bootstrap Icons are used by adding class="bi bi-iconname" to an <i> or <span> element. Option A correctly uses <i class="bi bi-heart"></i>.

Option A uses a non-existent <icon> tag and incorrect attributes.

Option A uses a wrong class name that Bootstrap Icons do not recognize.

Option A uses an <svg> tag without the proper SVG content or classes.

❓ rendering

advanced

Visual output of Bootstrap Icon usage

What will you see in the browser when you use this HTML snippet after including Bootstrap Icons CSS?

<i class="bi bi-alarm"></i>

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icon Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-alarm"></i>
</body>
</html>

A The text 'bi bi-alarm' appears as plain text.

B A small alarm clock icon appears where the <i> tag is placed.

C Nothing appears because the icon class is invalid.

D A broken image icon appears because the icon is an image.

💡 Hint

Bootstrap Icons are fonts that show icons, not images or text.

Bootstrap Icons are font icons. When you use <i class="bi bi-alarm"></i> with the correct CSS included, a small alarm clock icon is rendered.

Option B is wrong because the icon classes do not display text.

Option B is wrong because 'bi-alarm' is a valid icon name.

Option B is wrong because Bootstrap Icons are not images but font glyphs.

❓ selector

advanced

CSS selector to style all Bootstrap Icons

Which CSS selector correctly targets all Bootstrap Icons on a page to change their color to red?

A .bi { color: red; }

B .icon.bi { color: red; }

C i.bi { color: red; }

D svg.bi { color: red; }

💡 Hint

Bootstrap Icons always have the class 'bi'.

All Bootstrap Icons have the class bi. Using the selector .bi targets all elements with that class regardless of tag.

Option A only targets <i> tags with class bi, but icons can be used on other tags.

Option A targets elements with both icon and bi classes, which is not standard for Bootstrap Icons.

Option A targets <svg> elements with class bi, but Bootstrap Icons are font icons, not SVG elements by default.

❓ accessibility

expert

Making Bootstrap Icons accessible

Which is the best way to make a Bootstrap Icon accessible to screen readers when used as a button icon?

Bootsrap

<button type="button" class="btn">
  <i class="bi bi-play-circle"></i>
</button>

A

<button type="button" class="btn" aria-hidden="true">
  <i class="bi bi-play-circle"></i>
</button>

B

<button type="button" class="btn">
  <i class="bi bi-play-circle"></i> Play
</button>

C

<button type="button" class="btn" aria-label="Play">
  <i class="bi bi-play-circle" aria-hidden="true"></i>
</button>

D

<button type="button" class="btn">
  <i class="bi bi-play-circle" role="img"></i>
</button>

💡 Hint

Use aria-label on the button and hide the icon from screen readers.

Option C uses aria-label="Play" on the button to describe its purpose to screen readers and marks the icon as aria-hidden="true" so it is ignored by assistive technologies. This is the recommended approach.

Option C adds visible text 'Play' which is good but may not fit design needs if only icon is desired.

Option C hides the entire button from screen readers, making it inaccessible.

Option C adds role="img" to the icon but does not provide accessible text, so screen readers may not understand it.

Practice

1. What is the correct way to add Bootstrap Icons to your webpage?

easy

A. Include the Bootstrap Icons CSS link in the <head> section of your HTML.

B. Add a JavaScript file for Bootstrap Icons in the <body> section.

C. Use an <img> tag with the icon URL directly in the HTML.

D. Write icon names inside a <div> without any CSS or JS.

Solution

1. Step 1: Understand how Bootstrap Icons are loaded

   Bootstrap Icons are provided as a CSS library, so you need to link their CSS file in your HTML head.

2. Step 2: Identify the correct HTML placement

   The CSS link must be inside the <head> tag to load before the page renders.

3. Final Answer:

   Include the Bootstrap Icons CSS link in the <head> section of your HTML. -> Option A

4. Quick Check:

   Bootstrap Icons CSS link in <head> = B [OK]

Hint: Always add CSS links inside the <head> for proper loading [OK]

Common Mistakes:

• Adding CSS link inside <body>
• Using JavaScript file instead of CSS
• Trying to use icons without linking CSS

2. Which of the following is the correct syntax to display a Bootstrap icon for a house?

easy

A. <span class='icon-house'></span>

B. <icon name='house'></icon>

C. <i class='bi bi-house'></i>

D. <img src='house.svg' class='bi'>

Solution

1. Step 1: Recall Bootstrap Icons usage

   Bootstrap Icons use <i> tags with classes starting with bi and the icon name.

2. Step 2: Match the correct class format

   The correct class for the house icon is bi bi-house, used inside an <i> tag.

3. Final Answer:

   <i class='bi bi-house'></i> -> Option C

4. Quick Check:

   Use <i> with bi bi-iconname classes = C [OK]

Hint: Use <i> tag with 'bi bi-iconname' classes for icons [OK]

Common Mistakes:

• Using <icon> tag which doesn't exist
• Using <span> without correct classes
• Using <img> instead of icon classes

3. What will be the visual result of this HTML snippet after adding Bootstrap Icons CSS?

<i class='bi bi-alarm'></i>

medium

A. A broken image icon appears.

B. The text 'bi bi-alarm' is shown as plain text.

C. An empty space appears with no icon or text.

D. A clock alarm icon appears on the page.

Solution

1. Step 1: Understand icon rendering with Bootstrap Icons

   When the CSS is linked, the <i> tag with classes bi bi-alarm shows the alarm clock icon.

2. Step 2: Predict the visual output

   The icon appears as a small vector image representing an alarm clock, not text or empty space.

3. Final Answer:

   A clock alarm icon appears on the page. -> Option D

4. Quick Check:

   Bootstrap icon class renders icon = D [OK]

Hint: Icon classes show icons, not text or empty space [OK]

Common Mistakes:

• Expecting text instead of icon
• Not linking CSS so icon doesn't show
• Confusing icon with image tag behavior

4. You added this code to your HTML:

<i class='bi bi-camera'></i>

But the icon does not appear. What is the most likely reason?

medium

A. You forgot to include the Bootstrap Icons CSS link in the <head>.

B. The <i> tag is not supported in HTML5.

C. The class name should be icon-camera instead of bi bi-camera.

D. You need to add a JavaScript file to load the icon.

Solution

1. Step 1: Check icon setup requirements

   Bootstrap Icons require the CSS file to be linked in the HTML head to display icons.

2. Step 2: Identify common mistakes

   If the CSS is missing, the icon classes won't work and no icon appears.

3. Final Answer:

   You forgot to include the Bootstrap Icons CSS link in the <head>. -> Option A

4. Quick Check:

   Missing CSS link causes icons not to show = A [OK]

Hint: Always check CSS link if icons don't appear [OK]

Common Mistakes:

• Thinking <i> tag is obsolete
• Using wrong class names
• Expecting JavaScript to load icons

5. You want to add a clickable button with a Bootstrap icon for 'search' that is accessible and responsive. Which code snippet is best?

hard

A. <div class='btn btn-primary'><i class='bi bi-search'></i></div>

B. <button aria-label='Search' class='btn btn-primary'><i class='bi bi-search'></i> Search</button>

C. <button class='btn btn-primary'><img src='search.svg' alt='Search icon'></button>

D. <button class='btn btn-primary'><i class='icon-search'></i></button>

Solution

1. Step 1: Ensure semantic and accessible button

   Use a <button> element with an aria-label for screen readers.

2. Step 2: Use correct Bootstrap icon classes and button styling

   Include <i class='bi bi-search'></i> inside the button and add Bootstrap button classes for styling.

3. Step 3: Confirm responsiveness and accessibility

   Adding text 'Search' with the icon helps all users, and aria-label improves screen reader clarity.

4. Final Answer:

   <button aria-label='Search' class='btn btn-primary'><i class='bi bi-search'></i> Search</button> -> Option B

5. Quick Check:

   Accessible button with icon and label = A [OK]

Hint: Use <button> with aria-label and correct icon classes [OK]

Common Mistakes:

• Using <div> instead of <button> for clickable elements
• Missing aria-label for accessibility
• Using wrong icon class names