Prev Next

BS5 Select Menus

Bootstrap 5 Select Menus provide a customizable dropdown for selecting options, styled with the .form-select class.

Key Topics

Basic Select Menu

Create a basic select menu using the .form-select class.

<div class="mb-3">
    <label for="basicSelect" class="form-label">Select an option</label>
    <select class="form-select" id="basicSelect">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Explanation: Use .form-select for select menus, and pair it with a .form-label for accessibility.

Multiple Select Menu

Create a multiple select menu using the multiple attribute in the <select> tag.

<div class="mb-3">
    <label for="multipleSelect" class="form-label">Select multiple options</label>
    <select class="form-select" id="multipleSelect" multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Explanation: Add the multiple attribute to the <select> element to enable multi-selection.

Select Menu with Disabled Options

Disable options in a select menu by adding the disabled attribute to specific <option> tags.

<div class="mb-3">
    <label for="disabledSelect" class="form-label">Select an option</label>
    <select class="form-select" id="disabledSelect">
        <option disabled>Option 1 (Disabled)</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Explanation: Use the disabled attribute on <option> elements to make them unselectable.

Complete Select Menu Example

Below is a complete example combining different types of select menus, including basic, multiple, and disabled options.

<!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 Menus Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Select Menus</h2>
        <div class="mb-3">
            <label for="basicSelectExample" class="form-label">Basic Select Menu</label>
            <select class="form-select" id="basicSelectExample">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="multipleSelectExample" class="form-label">Multiple Select Menu</label>
            <select class="form-select" id="multipleSelectExample" multiple>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="disabledSelectExample" class="form-label">Select Menu with Disabled Options</label>
            <select class="form-select" id="disabledSelectExample">
                <option disabled>Option 1 (Disabled)</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines various select menu types to showcase Bootstrap's flexibility in creating dropdown menus.

Key Takeaways

  • Use .form-select for creating styled select menus.
  • Add the multiple attribute to allow multiple selections.
  • Disable options by applying the disabled attribute to specific <option> elements.
Prev Next