Input groups in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic input group with a text input and a button.

Bootsrap

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter text">
  <button class="btn btn-primary" type="button">[1]</button>
</div>

Drag options to blanks, or click blank then click option'

ASubmit

BClick

CSend

DGo

Attempts:

3 left

💡 Hint

Common Mistakes

Using a button text that is unclear or unrelated to the input action.

The button text should be "Submit" to clearly indicate the action.

2fill in blank

medium

Complete the code to add a text prefix inside the input group.

Bootsrap

<div class="input-group">
  <span class="input-group-text">[1]</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Drag options to blanks, or click blank then click option'

A&

B#

C$

D@

Attempts:

3 left

💡 Hint

Common Mistakes

Using symbols that do not relate to usernames, like '#' or '$'.

The '@' symbol is commonly used as a prefix for usernames.

3fill in blank

hard

Fix the error in the input group code by completing the missing class name.

Bootsrap

<div class="input-group">
  <input type="text" class="[1]" placeholder="Search">
  <button class="btn btn-outline-secondary" type="button">Go</button>
</div>

Drag options to blanks, or click blank then click option'

Ainput-group-text

Bbtn

Cform-control

Dform-input

Attempts:

3 left

💡 Hint

Common Mistakes

Using input-group-text on input instead of on span elements.

Using button classes on input elements.

The input element inside an input group must have the class form-control for proper styling.

4fill in blank

hard

Fill both blanks to create an input group with a checkbox before the input.

Bootsrap

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="[1]" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="[2]" placeholder="Check me">
</div>

Drag options to blanks, or click blank then click option'

Acheckbox

Bform-control

Cradio

Dinput-group-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'radio' instead of 'checkbox' for the first input.

Missing the 'form-control' class on the text input.

The input type should be checkbox and the text input needs the form-control class.

5fill in blank

hard

Fill all three blanks to create an input group with a dropdown button on the right.

Bootsrap

<div class="input-group">
  <input type="text" class="[1]" placeholder="Dropdown input">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="[2]" aria-expanded="false">
    [3]
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Drag options to blanks, or click blank then click option'

Aform-control

Bdropdown

COptions

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong classes on input or button.

Incorrect data attribute value for toggling dropdown.

Button text not descriptive of dropdown.

The input needs the form-control class, the button toggles a dropdown, and the button text is 'Options'.

Practice

1. What is the main purpose of Bootstrap input groups?

easy

A. To add text, symbols, or buttons next to input fields

B. To create dropdown menus

C. To style tables with borders

D. To add animations to buttons

Solution

1. Step 1: Understand input groups concept

   Input groups in Bootstrap are used to add extra elements like text or buttons next to input fields to improve clarity and interaction.

2. Step 2: Identify the correct purpose

   Options A, C, and D describe other Bootstrap features unrelated to input groups.

3. Final Answer:

   To add text, symbols, or buttons next to input fields -> Option A

4. Quick Check:

   Input groups add elements next to inputs = B [OK]

Hint: Input groups add stuff beside inputs, not menus or tables [OK]

Common Mistakes:

• Confusing input groups with dropdown menus
• Thinking input groups style tables
• Assuming input groups add animations

2. Which Bootstrap class is used to create an input group container?

easy

A. btn-group

B. input-group

C. form-control

D. input-container

Solution

1. Step 1: Recall Bootstrap input group structure

   The container for input groups uses the class input-group to wrap inputs and addons.

2. Step 2: Differentiate from other classes

   form-control styles inputs, btn-group groups buttons, and input-container is not a Bootstrap class.

3. Final Answer:

   input-group -> Option B

4. Quick Check:

   Container class for input groups = input-group [OK]

Hint: Remember: input-group wraps inputs and addons [OK]

Common Mistakes:

• Using form-control as container instead of input-group
• Confusing btn-group with input-group
• Using non-existent class input-container

3. What will this Bootstrap input group render?

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

medium

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

B. A button labeled '@' next to an input box

C. An input box with '@' symbol on the left inside a gray box

D. A plain input box with no extra elements

Solution

1. Step 1: Analyze the input group structure

   The input-group-text inside the input-group adds a styled box with '@' before the input field.

2. Step 2: Understand rendering result

   The '@' appears inside a gray box on the left side of the input box, not as a button or placeholder.

3. Final Answer:

   An input box with '@' symbol on the left inside a gray box -> Option C

4. Quick Check:

   input-group-text adds symbol box next to input = A [OK]

Hint: input-group-text adds styled text inside input group [OK]

Common Mistakes:

• Thinking input-group-text creates a button
• Confusing placeholder with input-group-text content
• Ignoring the gray box styling around '@'

4. Identify the error in this Bootstrap input group code:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Email" />
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Send</button>
  </span>
</div>

medium

A. The class 'input-group-btn' is deprecated and should be replaced

B. The button tag is not allowed inside input groups

C. The input must come after the button

D. The placeholder attribute is invalid inside input groups

Solution

1. Step 1: Check Bootstrap input group button usage

   Bootstrap 5 removed input-group-btn. Buttons inside input groups should be direct children with class btn.

2. Step 2: Verify other options

   Buttons are allowed inside input groups, input can be before or after button, and placeholder is valid on inputs.

3. Final Answer:

   The class 'input-group-btn' is deprecated and should be replaced -> Option A

4. Quick Check:

   input-group-btn deprecated in Bootstrap 5 = D [OK]

Hint: Use btn class directly; input-group-btn is outdated [OK]

Common Mistakes:

• Keeping input-group-btn class from older Bootstrap versions
• Thinking buttons can't be inside input groups
• Believing placeholder is invalid in input groups

5. You want to create an input group with a dropdown button on the right side of a text input. Which Bootstrap structure is correct?

hard

A.

Options

B.
Options

Action

C.

Action

Options

D.

Options

Action

Solution

1. Step 1: Understand input group with dropdown button

   The dropdown button must be a button with dropdown-toggle class and proper data-bs-toggle attribute inside the input group after the input.

2. Step 2: Check structure correctness

   Options

   • Action

   correctly places the input first, then the dropdown button with toggle attributes, followed by the dropdown menu list.

3. Final Answer:

   This structure correctly creates an input group with a dropdown button on the right -> Option D

4. Quick Check:

   Dropdown button after input with toggle attribute = A [OK]

Hint: Dropdown button needs toggle attribute and follows input inside input-group [OK]

Common Mistakes:

• Placing dropdown menu before button
• Using span instead of button for dropdown toggle
• Putting button before input in input group