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.
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/[email protected]/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/[email protected]/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 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/[email protected]/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/[email protected]/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 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/[email protected]/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/[email protected]/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 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/[email protected]/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/[email protected]/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 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/[email protected]/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/[email protected]/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
