Bootstrap - Form Floating Labels Part 3: Floating Labels with Select Dropdowns

Floating labels can also be used with select dropdowns, though they require additional styling.

Example 6: Floating Label for a Select Dropdown

<div class="form-floating mt-3">

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

        <option selected>Choose your country</option>

        <option value="1">United States</option>

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

        <option value="3">United Kingdom</option>

    </select>

    <label for="countrySelect">Country</label>

</div>

The form-select class is used instead of form-control.

<option selected> ensures that a placeholder text appears initially.

The floating label moves above the dropdown when the user selects an option.