Sorting
eCommerce sorting
Sorting component designed for eCommerce projects.
See also a page fully composed of the following elements.
Shop demoSorting basic example
<!-- Section: Block Content -->
<section>
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-outline md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
$(document).ready(function () {
$('.mdb-select').materialSelect();
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
$(this).closest('.select-outline').find('label').toggleClass('active');
$(this).closest('.select-outline').find('.caret').toggleClass('active');
});
});
Questions or feedback?
Let us know