Select menus in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap select menu?

Look at the following Bootstrap select menu code. What will you see rendered in the browser?

Bootsrap

<select class="form-select" aria-label="Fruit selection">
  <option selected>Choose a fruit</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Cherry</option>
</select>

A A button group with three buttons labeled Apple, Banana, Cherry and no default selection.

B A list of radio buttons labeled Apple, Banana, Cherry with 'Choose a fruit' as a heading.

C A text input box with placeholder 'Choose a fruit' and suggestions Apple, Banana, Cherry.

D A dropdown menu with the label 'Choose a fruit' shown as the default selected option, and options Apple, Banana, Cherry available.

💡 Hint

Remember, with class 'form-select' creates a dropdown menu in Bootstrap.

The

element with class 'form-select' renders a dropdown menu. The first with 'selected' attribute is shown as the default visible choice. The other options appear when the user clicks the dropdown.

❓ accessibility

intermediate

Which attribute improves accessibility for this select menu?

You have this select menu code. Which attribute should you add or keep to help screen readers understand it?

Bootsrap

<select class="form-select">
  <option value="1">Red</option>
  <option value="2">Green</option>
  <option value="3">Blue</option>
</select>

A Add aria-label="Color selection" to the <select> element.

B Add tabindex="-1" to the <select> element.

C Add role="button" to the <select> element.

D Add disabled="true" to the <select> element.

💡 Hint

Screen readers need a label to describe the purpose of form controls.

The aria-label attribute provides an accessible name for the select menu, so screen readers can announce what the menu is for. tabindex="-1" removes it from keyboard navigation, role="button" is incorrect for select, and disabled="true" disables the control.

📝 Syntax

advanced

What error occurs with this select menu code?

Examine this Bootstrap select menu code. What error or problem will happen when you try to use it?

Bootsrap

<select class="form-select" multiple>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
</select>

A SyntaxError because 'multiple' attribute requires a value like multiple="true".

B No error; it renders a multiple select menu allowing multiple options to be chosen.

C The select menu will only allow one option to be selected despite 'multiple' attribute.

D Bootstrap will ignore the 'multiple' attribute and render a normal dropdown.

💡 Hint

In HTML, boolean attributes like 'multiple' do not need a value.

The 'multiple' attribute on a element allows users to select more than one option. It is a boolean attribute and does not require a value. Bootstrap styles it accordingly. There is no syntax error.

❓ selector

advanced

Which CSS selector targets only enabled options inside a Bootstrap select menu?

You want to style only the enabled elements inside a select with class 'form-select'. Which CSS selector is correct?

A select.form-select option:not(:disabled) { color: green; }

B select.form-select option:enabled { color: green; }

C select.form-select option:active { color: green; }

D select.form-select option[enabled] { color: green; }

💡 Hint

Use the negation pseudo-class to exclude disabled options.

The :not(:disabled) selector matches options that are not disabled, effectively selecting enabled options. The :enabled pseudo-class does not apply to elements. The [enabled] attribute does not exist. :active matches elements being clicked, not enabled state.

❓ layout

expert

How to make a Bootstrap select menu fill the width of its container responsively?

You want your Bootstrap select menu to always fill 100% width of its parent container on all screen sizes. Which CSS or class approach achieves this best?

Bootsrap

<select class="form-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

A Add style 'width: 100vw;' inline to the select element.

B Wrap the select in a div with class 'd-flex' and no width classes.

C Add class 'w-100' to the select element: <select class="form-select w-100">

D Add class 'container' to the select element.

💡 Hint

Bootstrap utility classes like 'w-100' set width to 100%.

The 'w-100' class in Bootstrap sets width to 100% of the parent container, making the select fill the container responsively. Using 'width: 100vw;' makes it fill the viewport width, which can cause horizontal scrolling. 'd-flex' controls flex layout but does not set width. 'container' is a layout wrapper class, not for form controls.