Bootstrap Select

The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.

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 -->