Select menus in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic select menu with Bootstrap styling.

Bootsrap

<select class="form-select" aria-label="Default select example">
  <option selected>[1]</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'

ASelect

BChoose an option

COption

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the default option text empty

Using vague words like 'Select' without context

The option with the selected attribute shows the default text in the select menu. "Choose an option" is a clear prompt for users.

2fill in blank

medium

Complete the code to add a label for the select menu for accessibility.

Bootsrap

<label for="fruitSelect" class="form-label">[1]</label>
<select class="form-select" id="fruitSelect" aria-label="Fruit select">
  <option selected>Choose a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

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

ASelect your fruit

BChoose fruit

CPick a fruit

DFruit selection

Attempts:

3 left

💡 Hint

Common Mistakes

Using labels that are too vague or unclear

Not matching the label with the select menu's purpose

The label text should clearly describe what the select menu is for. "Select your fruit" is a clear instruction for users and screen readers.

3fill in blank

hard

Fix the error in the select menu code by completing the missing attribute.

Bootsrap

<select class="form-select" [1] aria-label="Country select">
  <option selected>Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="mx">Mexico</option>
</select>

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

Aid="countrySelect"

Bname="country"

Caria-labelledby="countryLabel"

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using name instead of id for label linking

Adding disabled which prevents selection

The id attribute is needed to link the select menu with its label or for scripting. Without it, accessibility and form behavior can be affected.

4fill in blank

hard

Fill both blanks to create a multiple select menu with Bootstrap styling and proper accessibility.

Bootsrap

<label for="[1]" class="form-label">Select your hobbies</label>
<select class="form-select" id="[2]" multiple aria-label="Hobbies select">
  <option value="reading">Reading</option>
  <option value="sports">Sports</option>
  <option value="music">Music</option>
  <option value="travel">Travel</option>
</select>

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

AhobbySelect

Bhobbies

Chobby

DhobbiesSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Using different ids for label and select

Using vague or inconsistent id names

The label and the select must share the same id value for accessibility. "hobbySelect" is a clear and consistent id.

5fill in blank

hard

Fill all three blanks to create a select menu with a disabled placeholder option and Bootstrap styling.

Bootsrap

<select class="form-select" aria-label="[1]">
  <option value="" [2] selected>[3]</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

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

AColor select

Bdisabled

CSelect a color

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Not disabling the placeholder option

Using an unclear aria-label

Not providing a clear placeholder text

The aria-label describes the select menu for screen readers. The placeholder option is disabled and selected to prompt the user to pick a color.

Practice

1. What is the main purpose of using the form-select class in Bootstrap?

easy

A. To style a dropdown select menu with Bootstrap's default look

B. To create a button that submits a form

C. To add animations to a text input field

D. To make a checkbox larger and colorful

Solution

1. Step 1: Understand Bootstrap form-select usage

   The form-select class is specifically designed to style <select> elements, giving them a consistent Bootstrap appearance.

2. Step 2: Differentiate from other form controls

   Buttons, checkboxes, and text inputs have their own classes; form-select is not used for those.

3. Final Answer:

   To style a dropdown select menu with Bootstrap's default look -> Option A

4. Quick Check:

   Bootstrap select styling = To style a dropdown select menu with Bootstrap's default look [OK]

Hint: Remember: form-select styles dropdown menus only [OK]

Common Mistakes:

• Confusing form-select with button classes
• Using form-select on inputs or checkboxes
• Thinking form-select adds animations

2. Which of the following is the correct Bootstrap syntax to create a select menu with three options labeled "Red", "Green", and "Blue" without value or selected attributes?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct Bootstrap class for select

   The correct class for styling select menus in Bootstrap is form-select.

2. Step 2: Check option tags and values

   Options can have values but are optional; the question asks for labeled options only, so simple <option> tags without values are valid.

3. Final Answer:

   Correct select with class form-select and options without values -> Option D

4. Quick Check:

   Bootstrap select syntax = <select class="form-select"> <option>Red</option> <option>Green</option> <option>Blue</option> </select> [OK]

Hint: Use class form-select and simple option tags for basic menus [OK]

Common Mistakes:

• Using form-control instead of form-select
• Adding unnecessary value attributes when not required
• Adding selected attribute without reason

3. What will be the visual result of this Bootstrap select menu code?

<select class="form-select" aria-label="Favorite color">
  <option selected>Choose color</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

medium

A. An error because aria-label is not allowed on select

B. A plain dropdown with no styling and options Red, Green, Blue

C. A styled dropdown with 'Choose color' shown initially and options Red, Green, Blue

D. A dropdown with no default option selected

Solution

1. Step 1: Analyze Bootstrap class and attributes

   The form-select class applies Bootstrap styling to the dropdown. The aria-label improves accessibility but does not affect appearance.

2. Step 2: Check the selected option

   The first option has the selected attribute, so it appears as the default visible text: "Choose color".

3. Final Answer:

   A styled dropdown with 'Choose color' shown initially and options Red, Green, Blue -> Option C

4. Quick Check:

   Bootstrap select with selected option = A styled dropdown with 'Choose color' shown initially and options Red, Green, Blue [OK]

Hint: Selected option text shows first in styled dropdown [OK]

Common Mistakes:

• Thinking aria-label breaks the select
• Assuming no default option is selected
• Confusing plain vs styled dropdown appearance

4. Identify the error in this Bootstrap select menu code:

<select class="form-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<label for="select">Numbers</label>

medium

A. The label is placed after the select and missing the matching id

B. The select is missing the class form-control

C. Options must not have value attributes in Bootstrap

D. The select tag is missing a closing tag

Solution

1. Step 1: Check label and select relationship

   The label uses for="select" but the select element has no id="select", so the label is not linked properly.

2. Step 2: Verify label placement and attributes

   Labels should be linked with the select via matching id and for attributes, and usually placed before or after but linked correctly.

3. Final Answer:

   The label is placed after the select and missing the matching id -> Option A

4. Quick Check:

   Label for attribute must match select id [OK]

Hint: Label's for must match select's id attribute [OK]

Common Mistakes:

• Using form-control instead of form-select
• Thinking options cannot have values
• Forgetting to close select tag (it is closed here)

5. You want to create a Bootstrap select menu that allows users to pick multiple fruits. Which code snippet correctly implements this with proper accessibility and Bootstrap styling?

hard

A. Choose fruits

B. Choose fruits

C. Choose fruits

D. Choose fruits

Solution

1. Step 1: Confirm multiple selection and Bootstrap styling

   The multiple attribute allows selecting multiple options. The class form-select is correct for Bootstrap styling.

2. Step 2: Check accessibility with label and aria-label

   The label uses for="fruits" matching the select's id="fruits". The aria-label describes the select for screen readers, improving accessibility.

3. Final Answer:

   Code with label linked by for/id, form-select class, multiple attribute, and aria-label -> Option B

4. Quick Check:

   Multiple select + label + form-select + aria-label = <label for="fruits">Choose fruits</label> <select id="fruits" class="form-select" multiple aria-label="Choose fruits"> <option>Apple</option> <option>Banana</option> <option>Cherry</option> </select> [OK]

Hint: Use multiple attribute and link label with id for accessibility [OK]

Common Mistakes:

• Omitting id or for attribute on label
• Using form-control instead of form-select
• Forgetting multiple attribute for multi-select