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'.