Bootstrap - Select Part 4: Select with Grouped Options

Why Use Grouped Options?

Grouped options help organize dropdown lists, making them easier to navigate.

Example 5: Grouped Select Dropdown

<div class="form-group">

    <label for="groupSelect">Select Your Favorite Beverage</label>

    <select class="form-select" id="groupSelect">

        <optgroup label="Hot Drinks">

            <option value="1">Tea</option>

            <option value="2">Coffee</option>

        </optgroup>

        <optgroup label="Cold Drinks">

            <option value="3">Soda</option>

            <option value="4">Juice</option>

        </optgroup>

    </select>

</div>

Explanation:

<optgroup> is used to categorize related options.

"Hot Drinks" and "Cold Drinks" act as section headers within the dropdown.

Useful for category-based selections, such as cities grouped by country.