bootstrap-select/bootstrap-select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

bootstrap-select

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

, _(*2)

, _(*3)

Demo

You can view a live demo and some examples of how to use the various options here., _(*4)

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., _(*5)

Several quick start options are available:, _(*6)

• 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):

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

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., _(*7)

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., _(*8)

Via selectpicker class

Add the selectpicker class to your select elements to auto-initialize bootstrap-select., _(*9)

<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();

or, _(*10)

// 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)., _(*11)

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

Check out the documentation for further information., _(*12)

Bugs and feature requests

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of bootstrap-select before submitting an issue., _(*13)

• Bug reports
• Feature requests

Documentation

Bootstrap-select's documentation, included in this repo in the root directory, is built with MkDocs and hosted at https://developer.snapappointments.com/bootstrap-select. The documentation may also be run locally., _(*14)

Copyright and license

Copyright (C) 2012-2018 SnapAppointments, LLC, _(*15)

Licensed under the MIT license., _(*16)