Form - Filters
Component #1
195 courses to get started
<!-- Filter -->
<div class="container">
<div class="row justify-content-md-start align-items-md-center">
<div class="col-md-4 mb-3 mb-md-0">
<p class="font-size-1 mr-md-auto mb-0"><span class="text-dark font-weight-bold">195 courses</span> to get started</p>
</div>
<div class="col-md-8 text-md-right">
<!-- Select -->
<select class="js-selectpicker dropdown-select mr-2 ml-md-2 mb-2" title="Sort" multiple
data-hs-selectpicker-options='{
"size": "5",
"width": "fit",
"style": "btn-outline-secondary btn-xs"
}'>
<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-selectpicker dropdown-select mr-2 mb-2" title="Type" multiple
data-hs-selectpicker-options='{
"size": "5",
"width": "fit",
"style": "btn-outline-secondary btn-xs"
}'>
<option value="price1">Paid</option>
<option value="price2">Free</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-selectpicker dropdown-select mr-2 mb-2" title="Duration" multiple
data-hs-selectpicker-options='{
"size": "5",
"width": "fit",
"style": "btn-outline-secondary btn-xs"
}'>
<option value="duration1">0-3 Hours</option>
<option value="duration2">3-9 Hours</option>
<option value="duration3">9-24 Hours</option>
<option value="duration4">24+ Hours</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-selectpicker dropdown-select mb-2" title="Skills" multiple
data-hs-selectpicker-options='{
"size": "5",
"width": "fit",
"style": "btn-outline-secondary btn-xs"
}'>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
<!-- End Select -->
</div>
</div>
</div>
<!-- End Filter -->
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select picker
$('.js-selectpicker').each(function () {
var selectpicker = $.HSCore.components.HSSelectPicker.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-selectpicker dropdown-select"
data-hs-selectpicker-options='{
"width": "fit",
"style": "btn-soft-secondary btn-xs"
}'>
<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-selectpicker dropdown-select"
data-hs-selectpicker-options='{
"width": "fit",
"style": "btn-soft-secondary btn-xs"
}'>
<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="#">
<i class="fas fa-th-large"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-soft-secondary" href="#">
<i class="fas fa-list"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- End Sorting -->
</div>
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select picker
$('.js-selectpicker').each(function () {
var selectpicker = $.HSCore.components.HSSelectPicker.init($(this));
});
});
</script>