The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

Demo

You can view a live demo and some examples of how to use the various options here.

Quick Start

Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap’s CSS. If you’re not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.4.1 minimum requirements can be downloaded here.

If using bootstrap-select with Bootstrap v4+, you’ll also need Popper.js. For all of Bootstrap v4’s requirements, see Getting started. A precompiled version of the requirements will be made available in an upcoming release of bootstrap-select.

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/snapappointments/bootstrap-select.git
• Install with npm: npm install bootstrap-select
• Install with yarn: yarn add bootstrap-select
• Install with Composer: composer require snapappointments/bootstrap-select
• Install with NuGet: Install-Package bootstrap-select
• Install with Bower: bower install bootstrap-select
• Install via CDN (cdnjs, jsDelivr, or PageCDN):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/i18n/defaults-*.min.js"></script>

The CDN is updated after the release is made public, which means that there is a delay between the publishing of a release and its availability on the CDN.

Usage

Bootstrap 4 only works with bootstrap-select v1.13.0+. By default, bootstrap-select automatically detects the version of Bootstrap being used. However, there are some instances where the version detection won’t work. See the documentation for more information.

Via selectpicker class

Add the selectpicker class to your select elements to auto-initialize bootstrap-select.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

Via JavaScript

To style only selects with the my-select class:

$('.my-select').selectpicker();

To style all selects:

$(select).selectpicker();

If calling bootstrap-select via JavaScript, you will need to wrap your code in a .ready() block or place it at the bottom of the page (after the last instance of bootstrap-select):

$(function () {
  $(select).selectpicker();
});

Check out the documentation for further information.

Troubleshooting

Although using bootstrap-select is typically straightforward, you may encounter some issues. Here are some common solutions:

• Bootstrap Version Detection: If bootstrap-select does not auto-detect your Bootstrap version, ensure that you are using a compatible version of Bootstrap and the latest bootstrap-select.
• JavaScript Errors: If the plugin doesn’t work, check your browser console for any JavaScript errors, particularly related to jQuery and Bootstrap loading.
• CSS Conflicts: Ensure that the CSS for Bootstrap and bootstrap-select is loaded correctly and not overridden by other styles.

If issues persist, consider consulting the documentation or contributing any bugs or feature requests via GitHub. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.