Bootstrap 5 Select: 5 Examples

Bootstrap 5 Select Form Control

  • The select is an HTML element to get the user input in the form of a dropdown list.
  • Most often, the select is used in HTML forms.
  • Bootstrap 5 provides built-in classes to design/style the HTML select form control
  • This tutorial provides how to use those classes along with various styles

An example of Bootstrap 5 Select

You only need to refer the Bootstrap 5 .form-select class to the HTML select element and BS will style the initial appearance of the select dropdown.

Note, it does not change how list items (options) are displayed. This behavior is due to browser limitations.

Have a look at a simple select control with five options:

BS 5 Code:

<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>
<body>

<div class="container m-4">

<select class="form-select" aria-label="Default select example">

  <option selected>Bootstrap 5 Select</option>

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

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

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

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

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

</select>
</div>

</body>
</html>

Output:

Bootstrap5-select

An example of a disabled select dropdown

You just need to add the disabled HTML attribute to the form control to disable it. It does two things:

  • It gives select a grayed-out look.
  • It also removes pointer events.

See the example below of a disabled select control:

BS5-select-disabled

Code:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

<div class="container m-4">

<select class="form-select" aria-label="Default select example" disabled>

  <option selected>Bootstrap 5 Select</option>

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

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

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

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

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

</select>
</div>
</body>

</html>

As you run the above code, a user won’t be able to click on the select to see its list/options.

Sizing of the select control example

You may also manage the size of select control by using size-specific classes provided by BS 5.

Following classes can be used for small and large select controls.

  • form-select-sm (For small size)
  • form-select-lg (For large size)

The following example shows all three types i.e. Normal (as we have seen in the above examples), small, and large:

BS5-select-sizes

BS 5 code:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>

<div class="container m-4">

<select class="form-select form-select-sm" aria-label="Default select example">

  <option selected>Small Select</option>

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

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

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

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

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

</select>  

<br><br>

<select class="form-select" aria-label="Default select example">

  <option selected>Normal Select</option>

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

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

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

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

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

</select>
<br><br>

<select class="form-select form-select-lg" aria-label="Default select example">

  <option selected>Large Select</option>

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

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

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

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

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

</select>
</div>
</body>
</html>

Using multiple attribute of the HTML select example

Need to allow users to select multiple options? BS 5 also supports multiple attribute. Just add multiple to the select tag and you are done. Have a look:

Code:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>

<div class="container m-4">
<select class="form-select" aria-label="Default select example" multiple >

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

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

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

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

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

</select>
</body>

</html>

Output:

BS5-select-multiple

Styling the select control

You may apply custom CSS to style the select control. In the following example, we have created a CSS class and referred it to the select control.

Markup:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>

.selcls {

    padding: 9px;

    border: solid 1px #375366;

    outline: 0;

    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #86A8BF), to(#FFFFFF));

    background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);

    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }
</style>    
</head>
<body>

<div class="container m-4">

<select class="form-select selcls" aria-label="Default select example" >

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

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

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

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

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

</select>
</body>

</html>

Result:

BS5-select-style

You may style your own CSS and apply it to form along with select control.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️