Bootstrap 5 Select Disabled
Last Updated :
14 Mar, 2023
Bootstrap 5 Select is a great component that helps us to add options that can be used inside a form as a field. Disabling a select menu just required the disabled attribute to be added to the select tag.
Bootstrap 5 Select Disabled Attributes:
- disabled: This attribute when added to the select tag, the select menu is disabled.
Syntax:
<select class="form-select" disabled>
<option>...</option>
...
</select>
Example 1: This code example demonstrates how we can disable the select menu.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Select Disabled
</h4>
<h5 class="ms-5 mt-5 text-success">
Choose the technologies you want to learn:
</h5>
<div class="container m-4">
<select class="form-select m-4 p-2" disabled>
<option selected>
This menu is not Clickable as it is disabled!!
</option>
<option value="1">
Data Structures
</option>
<option value="2">
Algorithms
</option>
<option value="3">
Competitive Programming
</option>
</select>
<select class="form-select m-4 p-2">
<option selected>
This menu is Clickable!!
</option>
<option value="1">
HTML
</option>
<option value="2">
CSS
</option>
<option value="3">
Bootstrap
</option>
</select>
</div>
</body>
</html>
|
Output:
Example 2: The code example below demonstrates an application of the disabled select menu.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Select Disabled
</h4>
<div class="row m-4">
<div class="col-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Are you a Human?
</h5>
<div class="container d-flex">
<div class="container d-flex">
<select class="form-select m-4 p-2"
disabled>
<option selected>
Yes
</option>
<option value="1">
No
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Do you want to learn Bootstrap 5?
</h5>
<div class="container d-flex">
<select class="form-select m-4 p-2">
<option selected>
Select the Option
</option>
<option value="1">
Yes
</option>
<option value="2">
No
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/select/#disabled
Share your thoughts in the comments
Please Login to comment...