Edit these docs

Sorting

eCommerce sorting

Sorting component designed for eCommerce projects.

See also a page fully composed of the following elements.

Shop demo

Sorting 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');
          });
        });