Input groups in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this Bootstrap input group render?

Look at the following Bootstrap input group code. What will you see in the browser?

Bootsrap

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

A An input box with '@' text inside the input box as placeholder.

B A plain input box with '@' text above it.

C An input box with '@' text on the right side outside the input border.

D An input box with a grey box containing '@' on the left side inside the input border.

💡 Hint

Remember that adds a styled box inside the input group.

Bootstrap's input group places the with class input-group-text inside the input border on the left side, visually attached to the input box.

❓ selector

intermediate

Which class adds a button inside a Bootstrap input group?

You want to add a clickable button inside a Bootstrap input group. Which class should you use on the button element?

A btn

B input-group-text

C btn-group

D input-group-btn

💡 Hint

Bootstrap buttons always use the 'btn' class.

To add a button inside an input group, use a button element with class 'btn' and optionally 'btn-primary' or others. 'input-group-text' is for static text, not buttons.

🧠 Conceptual

advanced

What is the purpose of aria-describedby in Bootstrap input groups?

In Bootstrap input groups, the input often has an attribute like aria-describedby="basic-addon1". What does this attribute do?

A It links the input to a descriptive element for screen readers, improving accessibility.

B It styles the input border color when focused.

C It makes the input required before form submission.

D It disables the input field.

💡 Hint

Think about how screen readers understand form controls.

aria-describedby links the input to another element that describes it, so screen readers can read the description, making forms more accessible.

❓ layout

advanced

How to place a button on the right side inside a Bootstrap input group?

You want a text input with a button attached on the right side inside the same input group. Which code snippet achieves this?

A

<div class="input-group">
  <span class="input-group-text">Go</span>
  <input type="text" class="form-control">
</div>

B

<div class="input-group">
  <button class="btn btn-primary" type="button">Go</button>
  <input type="text" class="form-control">
</div>

C

<div class="input-group">
  <input type="text" class="form-control">
  <button class="btn btn-primary" type="button">Go</button>
</div>

D

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-text">Go</span>
</div>

💡 Hint

The order of elements inside input-group determines their position.

In Bootstrap input groups, elements appear in the order they are written. To have a button on the right, place the input first, then the button.

❓ accessibility

expert

Which attribute is essential for screen reader users to understand input groups with multiple addons?

When an input group has multiple addons (like prefix and suffix text), which attribute should be used on the input to ensure screen readers read all descriptions correctly?

A aria-labelledby with IDs of all addon elements

B aria-describedby with IDs of all addon elements separated by spaces

C aria-label with a combined text description

D aria-hidden on all addon elements

💡 Hint

aria-describedby can reference multiple elements by listing their IDs separated by spaces.

Using aria-describedby with multiple IDs separated by spaces lets screen readers read all related addon texts, improving accessibility for complex input groups.