Form - Filters

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

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