Bootstrap - Form Select

This chapter will discuss about Bootstrap form select menu. Custom CSS can be used to alter the default appearance of the native <select> elements.

Default

  • Custom class .form-select is required for custom <select> menus, to trigger the custom styles.

  • Due to browser restrictions, custom styles are only able to change the <select>'s default appearance and cannot change the <options>s.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Select Menu</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <select class="form-select" aria-label="Default select example">
    <option selected>Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</body>
</html>

Sizing

In order to match the similar sized text inputs, you may also select from small and large custom selects.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Select Menu</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Large Sized Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
  <select class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option selected>Small Sized Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</body>
</html>

You can give multiple options in drop-down list using multiple attribute.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Select Menu</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <select class="form-select" multiple aria-label="multiple select example">
    <option selected>Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</body>
</html>

A size attribute restricts the number of options in a drop-down list.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Select Menu</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <select class="form-select" size="4" aria-label="size 3 select example">
    <option selected>Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="3">Item 4</option>
  </select>
</html>

Disabled

In order to make a select appear greyed out and eliminate pointer events, add the disabled boolean attribute to it.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form - Select Menu</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>Select Menu</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</html>
Advertisements