The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support and material design theme
You can view a live demo and some examples of how to use the various options here.
You can play with the material design theme here.
It adds many enhencements to the original plugin, with left-aligned animated checkboxes, textfield aspect, animated opening of dropdown ... and much more.
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.
- If necessary, install MkDocs.
- From the
/bootstrap-select/docs
directory, runmkdocs serve
in the command line. - Open
http://127.0.0.1:8000/
in your browser, and voilà.
Learn more about using MkDocs by reading its documentation.
Create your <select>
with the .selectpicker
class.
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
If you use a 1.6.3 or newer, you don't need to do anything else, as the data-api automatically picks up the <select>
s with the selectpicker
class.
If you use an older version, you need to add the following either at the bottom of the page (after the last selectpicker), or in a $(document).ready()
block.
// To style only <select>s with the selectpicker class
$('.selectpicker').selectpicker();
Or
// To style all <select>s
$('select').selectpicker();
Checkout the documentation for further information.
N.B.: 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. Check the GitHub page for the latest release.
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css
- //cdn.rawgit.com/djibe/bootstrap-select/v1.13.0-dev/dist/css/bootstrap-select-daemonite.min.css (Material design standalone theme v1, replaces bootstrap-select.css)
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js (The translation files)
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.
Copyright (C) 2012-2018 SnapAppointments, LLC
Licensed under the MIT license.