Bootstrap-Select

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

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="sbootstrap-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 class="js-select u-select" data-style="u-btn-secondary--air btn-sm">
                <option value="one" selected>One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
              </select>

Official Documentation

For more detailed information, see the official documentation: Bootstrap-select.