Multiselect Dropdown using Bootstrap-select jQuery plugin

An awesome Multiselect Dropdown by using the “Bootstrap-select” jQuery plugin and bootstrap. According to Bootstrap-select, we require jQuery v1.9.1+, Bootstrap dropdown.js component, and also Bootstrap’s CSS. If you want to use the Bootstrap-select jQuery plugin with Bootstrap new version 4+, you’ll also need Popper.js.

HTML

<select id="multipleSelect" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="banana">Banana</option>
    <option value="papaya">Papaya</option>
    <option value="mangos">Mangos</option>
    <option value="onions">Onions</option>
</select>

CSS

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 300px;
    margin: 100px auto;
    float: none;
    display: block;
}
.btn-light {
    border: 1px solid #ddd;
    border-radius: 30px;
}

JavaScript

$(function () {
  $('#multipleSelect').selectpicker();        
});