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 Bookworm 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 -->
Contact Us