Bootstrap - Select
The Bootstrap 5 Select component enhances HTML <select> elements, allowing users to choose from various options within a dropdown list. Bootstrap provides styling options that make the select box visually appealing and easy to integrate into any web form.
In this guide, we'll explore how to use Bootstrap 5's styling for select elements, including additional customization for form controls.
Basic Bootstrap Select
To create a simple select dropdown using Bootstrap 5, you can apply the .form-select class to your <select> element.
Example: Basic Select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Select Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<label for="basicSelect" class="form-label">Choose an option:</label>
<select class="form-select" id="basicSelect">
<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>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Explanation
The .form-select class gives the select box a modern, rounded look.
You can add the selected attribute to pre-select an option.
The id attribute helps with targeting specific elements for scripting or styling.
Bootstrap Select with Size Attribute
Bootstrap allows you to display multiple options at once using the size attribute. This is useful when you want a multi-line select box.
Example: Select with Size
<div class="container mt-5">
<label for="multiSelect" class="form-label">Select multiple options:</label>
<select class="form-select" id="multiSelect" size="4">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
Explanation
The size="4" attribute displays four options at a time without a scroll bar.
Users can scroll to see more options if the list exceeds the specified size.
Bootstrap Select with Multiple Attributes
You can enable multiple selections by using the multiple attributes along with .form-select.
Example: Multi-Select Dropdown
<div class="container mt-5">
<label for="multiSelectBox" class="form-label">Choose multiple options:</label>
<select class="form-select" id="multiSelectBox" multiple>
<option value="1">Option A</option>
<option value="2">Option B</option>
<option value="3">Option C</option>
<option value="4">Option D</option>
<option value="5">Option E</option>
</select>
</div>
Explanation
The multiple attribute allows users to select more than one option by holding down the Ctrl (or Cmd on Mac) key.
Bootstrap Select with Disabled Options
You can disable the entire select box or individual options using the disabled attribute.
Example: Disabled Select and Options
<div class="container mt-5">
<label for="disabledSelect" class="form-label">Disabled Select Box:</label>
<select class="form-select" id="disabledSelect" disabled>
<option selected>Cannot select this</option>
</select>
<label for="partialDisabledSelect" class="form-label mt-4">Select with Disabled Options:</label>
<select class="form-select" id="partialDisabledSelect">
<option value="1">Active Option</option>
<option value="2" disabled>Disabled Option</option>
<option value="3">Another Active Option</option>
</select>
</div>
Explanation
Use disabled on <select> to disable the entire dropdown.
Apply disabled on <option> to disable specific items within the dropdown.
Sizing Options for Select
Bootstrap provides classes to adjust the size of the select box.
Example: Select Sizing
<div class="container mt-5">
<label for="largeSelect" class="form-label">Large Select:</label>
<select class="form-select form-select-lg mb-3" id="largeSelect">
<option selected>Large Option</option>
</select>
<label for="smallSelect" class="form-label">Small Select:</label>
<select class="form-select form-select-sm" id="smallSelect">
<option selected>Small Option</option>
</select>
</div>
Explanation
.form-select-lg: Increases the height of the select box.
.form-select-sm: Decreases the height of the select box.
Bootstrap Select with Validation
Bootstrap also supports validation styles for select inputs, which can help indicate whether the user has made a valid selection.
Example: Select with Validation
<div class="container mt-5">
<label for="validatedSelect" class="form-label">Validated Select:</label>
<select class="form-select is-valid" id="validatedSelect">
<option selected>Valid Selection</option>
</select>
<select class="form-select is-invalid mt-3">
<option selected>Invalid Selection</option>
</select>
</div>
Explanation
.is-valid: Adds a green border indicating a valid selection.
.is-invalid: Adds a red border indicating an invalid selection.
Conclusion
Bootstrap 5 makes it incredibly easy to create beautiful and responsive select dropdowns with minimal effort. The .form-select class provides a modern and sleek look, while additional attributes and classes like multiple, size, is-valid, and is-invalid offer customization and validation features.
Summary of Bootstrap 5 Select Features:
Feature Description
.form-select Basic styling for select boxes
Multiple allows multiple selections
size Specifies the number of visible options
disabled Disables the select box or options
.form-select-lg Larger select box
.form-select-sm Smaller select box
.is-valid Validates with a green border
.is-invalid Shows an error with a red border
By leveraging Bootstrap's utility classes, you can create polished forms that enhance user experience with ease.