1. Home

Bootstrap 5 Select Menus

Select menus are used if you want to allow the user to pick from multiple options

Select Menu


Select menus are used if you want to allow the user to pick from multiple options.

To style a select menu in Bootstrap 5, add the .form-select class to the <select> element:

Example

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Select Menu Size



Use the .form-select-lg or .form-select-sm class to change the size of the select menu:

Example

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

Disabled Select Menu

Use the disabled attribute to disable the select menu:

Example

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Data Lists

Bootstrap will also style data lists, which is a list of pre-defined options for an <input> element:

Example

<label for="browser" class="form-label">Choose your browser from the list:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US