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