Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Select Menus

❮ Previous

Next ❯

In Bootstrap 5, you can use the form-select class to style HTML <select> elements. The form-select class provides a clean and modern design for dropdown menus, with various customization options.

Basic Select Menu:

Add the form-select class to a <select> element to create a styled dropdown.

Example
<div class="mb-3">
<label for="exampleSelect" class="form-label">Example Select</label>
<select class="form-select" id="exampleSelect">
<option selected>Open this select menu</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>

Try it yourself

Disabled Select Menu:

To make the entire select menu disabled, add the disabled attribute.

Example
<div class="mb-3">
<label for="exampleSelect" class="form-label">Example Select</label>
<select class="form-select" disabled>
<option selected>Disabled select menu</option>
<option value="1">Option 1</option>
</select>
</div>

Try it yourself

Sizing Options:

You can control the size of the select menu with the following classes:

Class

Description

form-select-lg

Large select menu.

form-select

Default size.

form-select-sm

Small select menu.
Example
<div class="mb-3">
<select class="form-select form-select-lg">
<option selected>Large select menu</option>
<option value="1">Option 1</option>
</select>
</div>

<div class="mb-3">
<select class="form-select">
<option selected>Default select menu</option>
<option value="1">Option 1</option>
</select>
</div>

<div class="mb-3">
<select class="form-select form-select-sm">
<option selected>Small select menu</option>
<option value="1">Option 1</option>
</select>
</div>

Try it yourself

Multiple Select Menu:

To allow multiple selections, add the multiple attribute.

Example
<select class="form-select" multiple>
<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>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>

Try it yourself

Customizing with Validation:

Bootstrap supports validation styles for select menus:

Class

Description

is-valid

Adds a green border for valid.

is-valid

Adds a red border for invalid.
Looks good!
Please select a valid option.
Example
<div class="mb-3">
<select class="form-select is-valid">
<option selected>Valid option</option>
<option value="1">Option 1</option>
</select>
<div class="valid-feedback">Looks good!</div>
</div>

<div class="mb-3">
<select class="form-select is-invalid">
<option selected>Invalid option</option>
<option value="1">Option 1</option>
</select>
<div class="invalid-feedback">Please select a valid option.</div>
</div>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.