Bootstrap 5 Select form is used to create customized select elements with custom CSS that changes the element’s initial appearance.
Bootstrap 5 Select Options:
- Default: It is used to create a default list of options from which a single option can be selected. To create a select option, we use <select> and <option> elements with the .form-select class.
- Sizing: It is used to create a list of options in small and large sizes of select elements.
- Disabled: It is used to create a disabled list of options in select elements.
Example 1: In this example, we will create default and disable select elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Select</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Select</h2>
<h3>Default Select Option</h3>
<select class="form-select" aria-label="GFG Select">
<option>Select an Option</option>
<option value="GFG1">HTML</option>
<option value="GFG2">CSS</option>
<option value="GFG3">JavaScript</option>
<option value="GFG4" selected>Bootstrap</option>
</select>
<br><br>
<h3>Disabled Select Option</h3>
<select class="form-select" aria-label="GFG Disabled Select" disabled>
<option>Select an Option</option>
<option value="GFG1">HTML</option>
<option value="GFG2">CSS</option>
<option value="GFG3">JavaScript</option>
<option value="GFG4" selected>Bootstrap</option>
</select>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create small and large sizes of select elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Select</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Select</h2>
<h3>Small Select Option</h3>
<select class="form-select form-select-sm" aria-label="GFG Small Select">
<option>Select an Option</option>
<option value="GFG1">HTML</option>
<option value="GFG2">CSS</option>
<option value="GFG3">JavaScript</option>
<option value="GFG4">Bootstrap</option>
</select>
<br><br>
<h3>Large Select Option</h3>
<select class="form-select form-select-lg" aria-label="GFG Large Select">
<option>Select an Option</option>
<option value="GFG1">HTML</option>
<option value="GFG2">CSS</option>
<option value="GFG3">JavaScript</option>
<option value="GFG4" selected>Bootstrap</option>
</select>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/select/