How to create select in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Select Dropdowns in Bootstrap Easily

To create a select dropdown in Bootstrap, use the <select> element with the class form-select. This class applies Bootstrap's styling to the dropdown, making it look clean and responsive.

📐

Syntax

Use the <select> tag with the Bootstrap class form-select. Inside, add <option> tags for each choice. You can add attributes like disabled or selected to control behavior.

html

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Output

A styled dropdown menu with options: 'Open this select menu', 'One', 'Two', 'Three'. The first option is selected by default.

💻

Example

This example shows a basic Bootstrap select dropdown with three options. It uses the form-select class to apply Bootstrap's default styling and responsiveness.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Select Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <label for="exampleSelect" class="form-label">Choose an option:</label>
    <select class="form-select" id="exampleSelect" aria-label="Example select">
      <option selected>Select an option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</body>
</html>

Output

A clean, responsive dropdown labeled 'Choose an option:' with four options, the first being the default prompt.

⚠️

Common Pitfalls

Common mistakes include forgetting to add the form-select class, which results in the browser's default dropdown style instead of Bootstrap's styled version. Another mistake is missing the aria-label or label element, which hurts accessibility.

Also, avoid using the form-control class on <select> as it is meant for text inputs and does not style selects properly in Bootstrap 5.

html

<!-- Wrong: Missing form-select class -->
<select>
  <option>Option A</option>
  <option>Option B</option>
</select>

<!-- Right: With form-select class -->
<select class="form-select" aria-label="Example select">
  <option>Option A</option>
  <option>Option B</option>
</select>

Output

The first select looks like a plain browser dropdown; the second is styled by Bootstrap.

📊

Quick Reference

Use: class="form-select" on <select>
Label: Always pair with <label> or aria-label for accessibility
Size: Add form-select-sm or form-select-lg for smaller or larger dropdowns
Disabled: Add disabled attribute to disable the select

✅

Key Takeaways

Add the class form-select to <select> for Bootstrap styling.

Always include a label or aria-label for accessibility.

Use form-select-sm or form-select-lg to adjust size.

Avoid using form-control on selects; it is for text inputs.

Remember to include Bootstrap CSS for styles to apply.