Bootstrap Select - How to use Bootstrap-Select for Dropdown



Bootstrap Select

  • Customize the native <select>s with custom CSS that changes the element’s initial appearance.
  • Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
how-to-create-select-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <select class="form-select" aria-label="Default select example">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
  </body>
</html>

Output

bootstrap-select

Bootstrap Select Sizing Example 1

  • You may also choose from small and large custom selects to match our similarly sized text inputs.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
    
    <select class="form-select form-select-sm" aria-label=".form-select-sm example">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
  </body>
</html>

Output

bootstrap-select-size-small

Bootstrap Select Sizing Example 2

  • The multiple attribute is also supported.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <select class="form-select" multiple="" aria-label="multiple select example">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
  </body>
</html>

Output

bootstrap-select-multiple-size

Bootstrap Select Sizing Example 3

  • As is the size attribute.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <select class="form-select" size="3" aria-label="size 3 select example">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
  </body>
</html>

Output

bootstrap-select-custom-size

Bootstrap Select Disabled

  • Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <select class="form-select" aria-label="Disabled select example" disabled="">
      <option selected="">Open this select menu</option>
      <option value="1">ABC</option>
      <option value="2">abc</option>
      <option value="3">123</option>
    </select>
  </body>
</html>

Output

bootstrap-select-disabled

Related Searches to Bootstrap Select - How to use Bootstrap-Select for Dropdown