Bootstrap Select
The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.
Official documentation
For more detailed information and examples, see the official documentation: Bootstrap-select .
How to use?
Add the following library Bootstrap-select stylesheet and script in your page.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.selectpicker.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
});
</script>
Basic example
<!-- Select -->
<select class="js-select selectpicker dropdown-select"
data-style="btn-sm btn-primary">
<option value="one" selected>One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
<!-- End Select -->
Select boxes with optgroups
<!-- Select -->
<select class="js-select selectpicker dropdown-select"
data-style="btn-sm btn-primary">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
<!-- End Select -->
Custom content
<!-- Select -->
<select class="js-select selectpicker dropdown-select mb-3" title="Choose member"
data-style="btn-sm btn-primary"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="project1" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</span>
<span>Amanta Owens</span>
</span>'>
Amanta Owens
</option>
<option value="project2" data-content='
<span class="d-flex align-items-center">
<span class="btn btn-xs btn-icon btn-soft-success rounded-circle mr-2">
<span class="btn-icon__inner">SD</span>
</span>
<span>Sebastian Diaz</span>
</span>'>
Sebastian Diaz
</option>
<option value="project3" data-content='
<span class="d-flex align-items-center">
<span class="btn btn-xs btn-icon btn-soft-indigo rounded-circle mr-2">
<span class="btn-icon__inner">ED</span>
</span>
<span>Eliza Donovan</span>
</span>'>
Eliza Donovan
</option>
<option value="project4" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</span>
<span>Cameron Brown</span>
</span>'>
Cameron Brown
</option>
</select>
<!-- End Select -->