Icons in buttons and inputs in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Rendering an icon inside a Bootstrap button

Which option correctly renders a Bootstrap button with a search icon on the left side of the text?

A <button class="btn btn-primary"><svg class="bi bi-search"></svg> Search</button>

B <button class="btn btn-primary">Search <i class="bi bi-search"></i></button>

C <button class="btn btn-primary"><span class="icon-search"></span> Search</button>

D <button class="btn btn-primary"><i class="bi bi-search"></i> Search</button>

💡 Hint

Bootstrap icons use the tag with classes starting with 'bi bi-'.

Option D correctly places the Bootstrap icon element with classes 'bi bi-search' before the button text. Option D places the icon after the text, which is valid but does not match the prompt. Option D uses a non-existent class 'icon-search'. Option D uses an empty

📝 Syntax

intermediate

Correct syntax for input with icon using Bootstrap

Which option correctly adds a Bootstrap icon inside an input group on the left side?

A <div class="input-group"><span class="input-group-text"><i class="bi bi-envelope"></i></span><input type="email" class="form-control" placeholder="Email"></div>

B <div class="input-group"><input type="email" class="form-control" placeholder="Email"><span class="input-group-text"><i class="bi bi-envelope"></i></span></div>

C <div class="input-group"><span class="input-group-icon"><i class="bi bi-envelope"></i></span><input type="email" class="form-control" placeholder="Email"></div>

D <div class="input-group"><span class="input-icon"><i class="bi bi-envelope"></i></span><input type="email" class="form-control" placeholder="Email"></div>

💡 Hint

Bootstrap input groups use 'input-group-text' for addon elements.

Option A uses the correct Bootstrap class 'input-group-text' to wrap the icon and places it before the input, which is the standard pattern. Option A places the icon after the input, which is valid but does not match the prompt. Options C and D use invalid classes 'input-group-icon' and 'input-icon' which do not exist in Bootstrap.

❓ selector

advanced

CSS selector to style only icons inside buttons

Which CSS selector will apply styles only to Bootstrap icons inside buttons but not icons elsewhere?

A button i.bi { color: red; }

B .btn > i.bi { color: red; }

C i.bi.btn { color: red; }

D button .bi { color: red; }

💡 Hint

Use direct child selector to target icons directly inside buttons with class 'btn'.

Option B uses '.btn > i.bi' which selects elements with class 'bi' that are direct children of elements with class 'btn' (Bootstrap buttons). Option B selects any with class 'bi' inside any

❓ layout

advanced

Aligning icon and text vertically centered in a Bootstrap button

Which CSS snippet ensures the icon and text inside a Bootstrap button are vertically centered and spaced nicely?

A .btn i.bi { float: left; margin-right: 1rem; }

B .btn i.bi { display: block; margin-bottom: 0.5rem; }

C .btn i.bi { vertical-align: middle; margin-right: 0.5rem; }

D .btn i.bi { position: absolute; left: 0; }

💡 Hint

Use vertical-align and margin to align inline icons with text.

Option C uses 'vertical-align: middle' to align the icon vertically with the text and adds right margin for spacing. Option C makes the icon block-level and adds bottom margin, which stacks icon above text. Option C floats the icon left, which can break button layout. Option C uses absolute positioning, which removes the icon from normal flow and can overlap text.

❓ accessibility

expert

Accessible icon usage in buttons

Which option correctly adds accessible text for a Bootstrap button with only an icon (no visible text)?

A <button class="btn btn-primary" aria-label="Close"><i class="bi bi-x-lg" aria-hidden="true"></i></button>

B <button class="btn btn-primary"><i class="bi bi-x-lg" title="Close"></i></button>

C <button class="btn btn-primary" aria-hidden="true"><i class="bi bi-x-lg"></i></button>

D <button class="btn btn-primary"><i class="bi bi-x-lg" aria-label="Close"></i></button>

💡 Hint

Use aria-label on the button and aria-hidden on the icon for screen readers.

Option A correctly adds 'aria-label' on the button to provide accessible text and marks the icon as 'aria-hidden' so screen readers ignore the decorative icon. Option A uses 'title' on the icon, which is not reliable for accessibility. Option A incorrectly adds 'aria-label' on the icon instead of the button. Option A hides the button from screen readers, making it inaccessible.

Practice

1. What is the main purpose of adding icons inside Bootstrap buttons or inputs?

easy

A. To increase the size of buttons automatically

B. To make buttons and inputs easier to understand visually

C. To change the button color to blue

D. To disable the input field

Solution

1. Step 1: Understand the role of icons in UI

   Icons provide visual clues that help users quickly understand the purpose of buttons or inputs.

2. Step 2: Relate to Bootstrap usage

   Bootstrap uses icons to improve user experience by making controls more intuitive.

3. Final Answer:

   To make buttons and inputs easier to understand visually -> Option B

4. Quick Check:

   Icons improve clarity = A [OK]

Hint: Icons help users recognize actions quickly [OK]

Common Mistakes:

• Thinking icons change button size automatically
• Assuming icons change colors by default
• Believing icons disable inputs

2. Which is the correct way to add a Bootstrap icon inside a button?

easy

A. Search

B. Search

C. Search

D. Search

Solution

1. Step 1: Identify Bootstrap icon syntax

   Bootstrap icons use <i> tags with classes like "bi bi-search".

2. Step 2: Check each option

   <button><i class="bi bi-search"></i> Search</button> uses <i> with correct classes; others use wrong tags or methods.

3. Final Answer:

   <button><i class="bi bi-search"></i> Search</button> -> Option D

4. Quick Check:

   Bootstrap icons use <i> + bi classes = A [OK]

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

Common Mistakes:

• Using <icon> tag which is invalid HTML
• Using <span> without Bootstrap icon classes
• Using <img> instead of icon classes

3. What will be the visual result of this code?

<div class="input-group">
  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
  <input type="email" class="form-control" placeholder="Email" aria-label="Email">
</div>

medium

A. An email input with an envelope icon on the left inside a styled box

B. A plain email input without any icon

C. An email input with the icon below the input field

D. An email input with the icon inside the placeholder text

Solution

1. Step 1: Understand input-group structure

   The .input-group wraps input and icon for inline layout with styling.

2. Step 2: Analyze icon placement

   The icon inside .input-group-text appears on the left side inside a styled box next to the input.

3. Final Answer:

   An email input with an envelope icon on the left inside a styled box -> Option A

4. Quick Check:

   Input group with icon left = B [OK]

Hint: Icons inside .input-group-text appear left inside input group [OK]

Common Mistakes:

• Expecting icon inside placeholder text
• Thinking icon appears below input
• Missing .input-group wrapper for layout

4. Identify the error in this Bootstrap button code with icon:

<button class="btn btn-primary">
  <i class="bi bi-search"></i>Search
</button>

medium

A. Missing space between icon and text

B. Incorrect icon class name

C. Button tag should be <div>

D. Icon tag should be <span>

Solution

1. Step 1: Check icon and text spacing

   The icon and text run together without space, making them look joined.

2. Step 2: Confirm correct classes and tags

   Icon class "bi bi-search" and <i> tag are correct; button tag is correct.

3. Final Answer:

   Missing space between icon and text -> Option A

4. Quick Check:

   Icon and text need space = D [OK]

Hint: Add space or   between icon and text [OK]

Common Mistakes:

• Assuming icon class is wrong
• Changing button tag unnecessarily
• Replacing <i> with <span> without reason

5. How can you add a clickable search icon inside an input field on the right side using Bootstrap?

hard

A. Add icon inside input tag using <i> directly

B. Place icon inside input placeholder attribute

C. Wrap input and icon in .input-group with icon inside .input-group-text placed after input

D. Use <button> outside input without grouping

Solution

1. Step 1: Understand Bootstrap input groups

   To add an icon inside input on the right, wrap input and icon in .input-group.

2. Step 2: Place icon after input inside .input-group-text

   Placing icon after input inside .input-group-text aligns it on the right side and makes it clickable.

3. Final Answer:

   Wrap input and icon in .input-group with icon inside .input-group-text placed after input -> Option C

4. Quick Check:

   Right icon in input = input-group + input-group-text after input [OK]

Hint: Use .input-group with icon after input for right side icon [OK]

Common Mistakes:

• Trying to put icon inside placeholder
• Adding icon tag inside input element (invalid)
• Placing button outside input group losing alignment