Bird
Raised Fist0
Bootsrapmarkup~10 mins

Bootstrap Icons library setup - Interactive Code Practice

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add the Bootstrap Icons CSS link in the HTML head.

Bootsrap
<head>
  <link rel="stylesheet" href="[1]">
</head>
Drag options to blanks, or click blank then click option'
Ahttps://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css
Bhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
Chttps://fonts.googleapis.com/css?family=Roboto
Dhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
Attempts:
3 left
💡 Hint
Common Mistakes
Using the Bootstrap CSS link instead of Bootstrap Icons CSS.
Using Font Awesome or Google Fonts links by mistake.
2fill in blank
medium

Complete the code to add a Bootstrap icon for a house inside the body.

Bootsrap
<body>
  <i class="bi bi-[1]"></i>
</body>
Drag options to blanks, or click blank then click option'
Ahouse
Bcalendar
Calarm
Dcamera
Attempts:
3 left
💡 Hint
Common Mistakes
Using icon names that do not exist or are unrelated.
Forgetting the 'bi-' prefix in the class.
3fill in blank
hard

Fix the error in the icon class to correctly show a Bootstrap icon for a heart.

Bootsrap
<i class="[1]"></i>
Drag options to blanks, or click blank then click option'
Aicon-heart
Bheart
Cbi-heart-fill
Dfa-heart
Attempts:
3 left
💡 Hint
Common Mistakes
Using icon class names without the 'bi-' prefix.
Using Font Awesome classes like 'fa-heart'.
4fill in blank
hard

Fill both blanks to correctly add the Bootstrap Icons CSS link with integrity and crossorigin attributes.

Bootsrap
<link rel="stylesheet" href="[1]" integrity="[2]" crossorigin="anonymous">
Drag options to blanks, or click blank then click option'
Ahttps://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css
Bsha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x
Csha256-abc123xyz456
Dhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
Attempts:
3 left
💡 Hint
Common Mistakes
Using Bootstrap CSS URL instead of Bootstrap Icons CSS.
Using incorrect or missing integrity hashes.
5fill in blank
hard

Fill all three blanks to create a button with a Bootstrap icon and accessible label.

Bootsrap
<button type="button" aria-label="[1]">
  <i class="bi bi-[2]" aria-hidden="true"></i> [3]
</button>
Drag options to blanks, or click blank then click option'
AClose
Bx-circle
DOpen
Attempts:
3 left
💡 Hint
Common Mistakes
Not adding aria-label for accessibility.
Using icon names that do not match the button action.
Missing visible text for screen readers.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard