Icons in buttons and inputs in Bootsrap - Mini Project: Build & Apply

Icons in Buttons and Inputs with Bootstrap

📖 Scenario: You are creating a simple web form that uses Bootstrap to add icons inside buttons and input fields. This helps users quickly understand the purpose of each element, like a search box with a magnifying glass icon or a submit button with a checkmark.

🎯 Goal: Build a small HTML page using Bootstrap 5 that includes a search input with a search icon inside it and a submit button with a checkmark icon. The icons should be from Bootstrap Icons and placed correctly inside the elements.

📋 What You'll Learn

Use Bootstrap 5 CSS and Bootstrap Icons CSS from CDN

Create a search input with a search icon inside it on the left

Create a submit button with a checkmark icon on the left

Use proper Bootstrap classes for input groups and buttons

Ensure the icons are accessible with appropriate aria-labels

💡 Why This Matters

🌍 Real World

Icons in buttons and inputs are common in web forms and apps to make interfaces easier to understand and use. For example, search boxes often have a magnifying glass icon, and submit buttons may have checkmarks.

💼 Career

Knowing how to use Bootstrap and Bootstrap Icons to enhance form controls is a valuable skill for front-end web developers and UI designers. It improves user experience and accessibility.

1

Set up the basic HTML structure with Bootstrap and Bootstrap Icons

Create a basic HTML5 page with lang="en", meta charset="UTF-8", and viewport meta tag. Include Bootstrap 5 CSS and Bootstrap Icons CSS from their official CDN links inside the <head>. Add a <body> with a <main> container where you will add the form later.

Bootsrap

Hint

Remember to include the Bootstrap CSS and Bootstrap Icons CSS links inside the <head> section.

2

Add a search input with a search icon inside using Bootstrap input group

Inside the <main> container, add a Bootstrap input group with a text input for search. Add a <span> with class input-group-text containing the Bootstrap icon bi bi-search on the left side of the input. The input should have type="search", placeholder="Search", and aria-label="Search input".

Bootsrap

  
  
  Icons in Buttons and Inputs
  
  


  
    
      
    
  

Hint

Use a span with class input-group-text for the icon and link it with the input using aria-describedby.

3

Add a submit button with a checkmark icon on the left

Below the input group, add a Bootstrap button with class btn btn-primary. Inside the button, add a Bootstrap icon bi bi-check-lg on the left, followed by the text Submit. The icon should have aria-hidden="true" for accessibility.

Bootsrap

  
  
  Icons in Buttons and Inputs
  
  


  
    
      
      
    
    
      
    
  

Hint

Place the icon inside the button before the text and add aria-hidden="true" to the icon.

4

Add accessibility and responsive spacing

Add aria-label="Submit form" to the submit button for screen readers. Also, add a Bootstrap margin utility class mt-3 to the button to add space above it on all screen sizes.

Bootsrap

  
  
  Icons in Buttons and Inputs
  
  


  
    
      
      
    
    
       Submit
    
    
  

Hint

Add the aria-label attribute and the mt-3 class inside the button tag.

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