Article Categories

Selected Reading

Bootstrap Form select

Bootstrap HTML Javascript jQuery

A select dropdown is used when you want to allow users to pick from multiple options. By default, it only allows one selection, but can be configured for multiple selections.

Use <select> for list options with which users are familiar, such as states, countries, or categories.
Use multiple attribute to allow users to select more than one option.
Bootstrap's form-control class provides consistent styling across browsers.

Basic Select Example

Here's a simple Bootstrap form with a select dropdown:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Form Select</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
   <div class="container mt-4">
      <form>
         <div class="form-group">
            <label for="country">Select Country</label>
            <select class="form-control" id="country">
               <option value="">Choose a country...</option>
               <option value="in">India</option>
               <option value="au">Australia</option>
               <option value="us">United States</option>
               <option value="uk">United Kingdom</option>
            </select>
         </div>
      </form>
   </div>
</body>
</html>

Multiple Selection Example

To allow multiple selections, add the multiple attribute:

<div class="form-group">
   <label for="skills">Select Skills (Hold Ctrl/Cmd to select multiple)</label>
   <select class="form-control" id="skills" multiple>
      <option value="js">JavaScript</option>
      <option value="py">Python</option>
      <option value="java">Java</option>
      <option value="react">React</option>
      <option value="node">Node.js</option>
   </select>
</div>

Select Sizes

Bootstrap provides different sizes for select elements:

<!-- Large select -->
<select class="form-control form-control-lg">
   <option>Large select</option>
</select>

<!-- Default select -->
<select class="form-control">
   <option>Default select</option>
</select>

<!-- Small select -->
<select class="form-control form-control-sm">
   <option>Small select</option>
</select>

Key Features

Feature	Class/Attribute	Purpose
Basic Styling	`form-control`	Consistent Bootstrap styling
Multiple Selection	`multiple`	Allow selecting multiple options
Size Variants	`form-control-lg/sm`	Large or small select boxes

Conclusion

Bootstrap form selects provide a clean, responsive way to present dropdown options. Use the form-control class for consistent styling and the multiple attribute when users need to select multiple items.

Samual Sam

Updated on: 2026-03-15T23:18:59+05:30

444 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next