What is Select menus in Bootsrap?

Bootsrapmarkup~5 mins

Select menus in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Select menus let users pick one or more options from a list. They keep forms neat and easy to use.

Choosing a country from a list when signing up.

Picking a favorite color in a profile form.

Selecting a quantity before buying a product.

Filtering search results by category.

Setting preferences like language or timezone.

Syntax

Bootsrap

<select class="form-select" aria-label="Example select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Use class="form-select" to apply Bootstrap styles.

Always add aria-label or a <label> for accessibility.

Examples

A simple select menu with fruit options and a default prompt.

Bootsrap

<select class="form-select" aria-label="Select a fruit">
  <option selected>Choose a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

This select menu allows picking more than one option by adding multiple.

Bootsrap

<select class="form-select" multiple aria-label="Select multiple colors">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Using a label and help text improves clarity and accessibility.

Bootsrap

<label for="sizeSelect" class="form-label">Select size</label>
<select id="sizeSelect" class="form-select" aria-describedby="sizeHelp">
  <option value="small">Small</option>
  <option value="medium" selected>Medium</option>
  <option value="large">Large</option>
</select>
<div id="sizeHelp" class="form-text">Choose your preferred size.</div>

Sample Program

This page shows a labeled select menu styled by Bootstrap. The user can pick their favorite pet from the list. The help text explains what to do.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Select Menu Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-5">
    <h1>Select your favorite pet</h1>
    <form>
      <label for="petSelect" class="form-label">Favorite pet</label>
      <select id="petSelect" class="form-select" aria-describedby="petHelp">
        <option selected disabled>Choose a pet</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="bird">Bird</option>
        <option value="fish">Fish</option>
      </select>
      <div id="petHelp" class="form-text">Select one option from the list.</div>
    </form>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always use a <label> or aria-label for screen readers.

The multiple attribute lets users select more than one option.

Bootstrap styles make select menus look clean and consistent across browsers.

Summary

Select menus let users pick options from a list.

Use Bootstrap's form-select class for styling.

Labels and ARIA attributes improve accessibility.