Form control basics in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap text input field.

Bootsrap

<input type="text" class="form-control [1]" placeholder="Enter your name">

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

Aform-control-lg

Bform-control

Cform-input

Dinput-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'form-input' or 'input-text'.

Omitting the class attribute entirely.

The form-control class is required to style the input as a Bootstrap form control.

2fill in blank

medium

Complete the code to create a Bootstrap textarea with 3 rows.

Bootsrap

<textarea class="form-control" rows="[1]" placeholder="Your message"></textarea>

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

A3

B4

C2

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using too few or too many rows making the textarea too small or too large.

Forgetting to add the rows attribute.

The rows attribute sets the visible height of the textarea. Here, 3 rows are requested.

3fill in blank

hard

Fix the error in the code to properly create a Bootstrap checkbox input.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" [1]>
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

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

Achecked="checked"

Bchecked=checked

Cchecked=true

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect syntax like checked=true which is invalid in HTML.

Omitting the checked attribute when the checkbox should be pre-selected.

In HTML, the correct way to mark a checkbox as checked is checked="checked".

4fill in blank

hard

Fill both blanks to create a Bootstrap select dropdown with a label.

Bootsrap

<label for="[1]" class="form-label">Choose an option</label>
<select class="form-select" id="[2]">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

AexampleSelect

BselectOption

CdropdownMenu

DmenuSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for the label's for and select's id.

Using invalid characters or spaces in the id.

The for attribute in the label and the id of the select must match for accessibility and correct linking.

5fill in blank

hard

Fill all three blanks to create a Bootstrap input group with a text input and a button.

Bootsrap

<div class="input-group mb-3">
  <input type="[1]" class="form-control" placeholder="Search" aria-label="Search input">
  <button class="btn btn-outline-[2]" type="button" id="button-addon2">[3]</button>
</div>

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

Atext

Bprimary

CGo

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect input types like 'search' which is valid but not the expected answer here.

Using button colors that do not exist in Bootstrap like 'outline-red'.

Using button text that is too long or unclear.

The input type should be text for a search box. The button uses the Bootstrap color primary for styling. The button text is 'Go' to indicate action.