Form - Filters

Component #1

195 courses to get started

                    
                      <!-- Select -->
                      <select class="js-custom-select"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "btn btn-sm btn-white dropdown-toggle mb-1",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option value="sort1">Highest rated</option>
                        <option value="sort2">Newest</option>
                        <option value="sort3">Lowest price</option>
                        <option value="sort4">Highest price</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "btn btn-sm btn-white dropdown-toggle mb-1",
                              "placeholder": "Type",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="price1" selected>Paid</option>
                        <option value="price2">Free</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "btn btn-sm btn-white dropdown-toggle mb-1",
                              "placeholder": "Duration",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="duration1">0-3 Hours</option>
                        <option value="duration2">3-9 Hours</option>
                        <option value="duration3">9-24 Hours</option>
                        <option value="duration4" selected>24+ Hours</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "btn btn-sm btn-white dropdown-toggle mb-1",
                              "placeholder": "Skills",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="beginner" selected>Beginner</option>
                        <option value="intermediate">Intermediate</option>
                        <option value="advanced">Advanced</option>
                      </select>
                      <!-- End Select -->
                    
                  
                    
                      <link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of select2
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

110 products
                    
                      <div class="container">
                        <!-- Sorting -->
                        <div class="row align-items-center">
                          <div class="col-lg-6 mb-3 mb-lg-0">
                            <span class="font-size-1 ml-1">110 products</span>
                          </div>

                          <div class="col-lg-6 align-self-lg-end text-lg-right">
                            <ul class="list-inline mb-0">
                              <li class="list-inline-item">
                                <!-- Select -->
                                <select class="js-custom-select"
                                      data-hs-select2-options='{
                                        "minimumResultsForSearch": "Infinity",
                                        "customClass": "btn btn-xs btn-white dropdown-toggle",
                                        "dropdownAutoWidth": true,
                                        "width": "auto"
                                      }'>
                                  <option value="mostRecent" selected>Sort by</option>
                                  <option value="newest">Newest first</option>
                                  <option value="priceHighLow">Price (high - low)</option>
                                  <option value="priceLowHigh">Price (low - high)</option>
                                  <option value="topSellers">Top sellers</option>
                                </select>
                                <!-- End Select -->
                              </li>
                              <li class="list-inline-item">
                                <!-- Select -->
                                <select class="js-custom-select"
                                      data-hs-select2-options='{
                                        "minimumResultsForSearch": "Infinity",
                                        "customClass": "btn btn-xs btn-white dropdown-toggle",
                                        "dropdownAutoWidth": true,
                                        "width": "auto"
                                      }'>
                                  <option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
                                  <option value="alphabeticalOrderSelect2">Z-to-A</option>
                                </select>
                                <!-- End Select -->
                              </li>
                              <li class="list-inline-item">
                                <a class="btn btn-xs btn-soft-secondary active" href="products-grid.html">
                                  <i class="fas fa-th-large"></i>
                                </a>
                              </li>
                              <li class="list-inline-item">
                                <a class="btn btn-xs btn-soft-secondary" href="products-list.html">
                                  <i class="fas fa-list"></i>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Sorting -->
                      </div>
                    
                  
                    
                      <link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of select2
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>