Bootstrap 5 Select Default
Last Updated :
10 Apr, 2024
Bootstrap 5 Select Default stylizes dropdown menus, enhancing user experience. However, limitations exist in modifying option styles due to browser constraints, despite offering various customization options for select elements.
Bootstrap 5 Select Default Class:
- form-select: This class is used to trigger the select option styles of Bootstrap 5.
Syntax:
<select class="form-select">
<option value="...">Option1</option>
...
</select>
Below examples illustrate the Bootstrap 5 Select Default:
Example 1: In this example, we used the Bootstrap 5 select element by applying the form-select class to the HTML <select> element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="m-3">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Default Select</strong>
<br>
<!--- Bootstrap 5 Default Select Class used -->
<select class="form-select">
<option>Choose Option</option>
<option value="gfg1">Option 1</option>
<option value="gfg1">Option 2</option>
<option value="gfg1">Option 3</option>
</select>
</div>
</body>
</html>
Output:
Bootstrap 5 Select Default
Example 2: In this example, we used the select attribute of the select any particular option as default.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="m-3">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Default Select</strong>
<br>
<!--- Bootstrap 5 Default Select Class used -->
<select class="form-select">
<option selected>Choose Option</option>
<option value="gfg1">Option 1</option>
<option value="gfg1">Option 2</option>
<option value="gfg1">Option 3</option>
</select>
<br>
<select class="form-select">
<option value="gfg1" selected>Option 1</option>
<option value="gfg1">Option 2</option>
<option value="gfg1">Option 3</option>
</select>
</div>
</body>
</html>
Output:
Bootstrap 5 Select Default
Share your thoughts in the comments
Please Login to comment...