bootstrap
  1. bootstrap-select
PreviousNext

Bootstrap Select

Bootstrap Select is a JavaScript plugin that adds dropdown menus with search functionality, input masking, and other useful features to HTML select elements.

Syntax

To use Bootstrap Select, you need to add the following code in the head section of your HTML file:

You also need to add the following code to your HTML select element:

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

Example

Here is an example of how to add Bootstrap Select to your HTML select element.

<div class="container mt-3">
    <h1>Bootstrap Select Example</h1>
    <select class="form-select">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
Try Playground

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

<select class="form-select form-select-lg mb-3" aria-label="Large select example">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select class="form-select form-select-sm" aria-label="Small select example">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
Try Playground

Explanation

In the code above, we used the following classes to enable Bootstrap Select on our HTML select element:

Bootstrap Select comes with a lot of features that can be added to the select element by adding additional classes to the select element. Some of these features include live search, multiple select, maximum allowed options, and more.

Use

Bootstrap Select is useful when you need to implement a select element with more features than the default HTML select element provides. You can use Bootstrap Select to add search functionality, input masking, validation, and more to your select elements.

Important Points

  • Bootstrap Select is a JavaScript plugin that enhances HTML select elements.
  • Bootstrap Select adds search functionality, input masking, validation, and more to select elements.
  • Bootstrap Select is easy to use and can be customized with additional classes to add more features.

Summary

Bootstrap Select is a useful plugin for enhancing HTML select elements and adding features such as search, input masking, and validation. By using Bootstrap Select, you can provide a better user experience to your users and make your select elements more functional.

FormsCheck and Radio
Published on: