Learn with us

In Bootstrap 5, you can create stylish and interactive select dropdowns using the <select> element and Bootstrap’s form styling classes. Here’s how you can create select dropdowns in Bootstrap 5:

1. Basic Select Dropdown:

<select class="form-select">
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

In this example, the form-select class is applied to the <select> element to style it as a Bootstrap select dropdown. The selected attribute is added to the first <option> element to set it as the default selected option.

2. Select Dropdown with Label:

<label for="selectDropdown" class="form-label">Select an option</label>
<select class="form-select" id="selectDropdown">
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Here, we add a <label> element with the form-label class and a for attribute that matches the id of the <select> element. This associates the label with the select dropdown for better accessibility.

3. Select Dropdown with Size:

<select class="form-select form-select-lg">
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

In this example, we apply the form-select-lg class to the <select> element to make the select dropdown larger. Bootstrap also provides form-select-sm for smaller size.

4. Disabled Select Dropdown:

<select class="form-select" disabled>
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

By adding the disabled attribute to the <select> element, you can make the select dropdown disabled and prevent user interaction.

5. Multiple Select Dropdown:

<select class="form-select" multiple>
  <option selected>Select multiple options</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Adding the multiple attribute to the <select> element allows users to select multiple options simultaneously.

These examples demonstrate some of the commonly used features of select dropdowns in Bootstrap 5. You can further customize the appearance and behavior of select dropdowns using additional Bootstrap classes and JavaScript-based plugins if needed.

Make sure to include the necessary Bootstrap 5 CSS and JavaScript files in your project to apply the select dropdown styling and functionality provided by Bootstrap.