Search simple

<div class="searchbox">
  <div class="searchbox__content row">
    <div class="col-12 text-center">
      <h2 class="tc-green-dark mb-4">Poiščite želeni izdelek</h2>
      <p class="big">
        V skrbi za zdravje zagotavljamo bogato paleto visokokakovostnih zdravil na recept, zdravil 
        brez recepta in veterinarskih izdelkov. Poiščite, kar vas zanima.
      </p>
    </div>
  </div>
  <div class="searchbox__input row">
    <div class="col-12">
      <div class="form-control-icon form-control-icon--purple">
        <input type="text" class="form-control form-control-xl " placeholder=".form-control-xl" />
        <i class="icon icon--search-white"></i>
      </div>
    </div>
  </div>
</div>

Search expanded

Search expanded (three dropdowns)

<div class="searchbox">
  <div class="searchbox__content row">
    <div class="col-12 text-center">
      <h2 class="tc-green-dark mb-4">Poiščite želeni izdelek</h2>
      <p class="big">
        V skrbi za zdravje zagotavljamo bogato paleto visokokakovostnih zdravil na recept, zdravil 
        brez recepta in veterinarskih izdelkov. Poiščite, kar vas zanima.
      </p>
    </div>
  </div>
  <div class="searchbox__input row">
    <div class="col-12">
      <div class="form-control-icon form-control-icon--purple">
        <input type="text" class="form-control form-control-xl " placeholder=".form-control-xl" />
        <i class="icon icon--search-white"></i>
      </div>
    </div>
  </div>
  <div class="searchbox__types row">
    <div class="col-12">
      <div class="d-flex justify-content-around">
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="radio1" name="search" value="1">
          <label for="radio1" class="form-check-label">Na recept</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="radio2" name="search" value="2">
          <label for="radio2" class="form-check-label">Brez recepta</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="radio3" name="search" value="3">
          <label for="radio3" class="form-check-label">Veterinarski izdelki</label>
        </div>
      </div>
    </div>
  </div>
  <div class="searchbox__filter row">
    <div class="col-12 col-md mb-4 mb-lg-0">
      <select class="form-select form-select-lg initDropdown">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
      </select>
    </div>
    <div class="col-12 col-md">
      <select class="form-select form-select-lg initDropdown">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
      </select>
    </div>
    <div class="col-12 col-md">
      <select class="form-select form-select-lg initDropdown">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
      </select>
    </div>
    <div class="col-12">
      <ul class="searchbox__letters">
        <li><a href="#">A</a></li>
        <li class="active"><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">Č</a></li>
        <li class="disabled"><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <li class="disabled"><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
        <li><a href="#">I</a></li>
        <li><a href="#">J</a></li>
        <li><a href="#">K</a></li>
        <li><a href="#">L</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">N</a></li>
        <li><a href="#">O</a></li>
        <li><a href="#">P</a></li>
        <li><a href="#">Q</a></li>
        <li><a href="#">R</a></li>
        <li><a href="#">S</a></li>
        <li><a href="#">Š</a></li>
        <li><a href="#">T</a></li>
        <li><a href="#">V</a></li>
        <li><a href="#">U</a></li>
        <li><a href="#">Z</a></li>
        <li><a href="#">Ž</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">Y</a></li>
      </ul>
    </div>
  </div>
</div>