Dropdowns

Dropdown and Dropup

Copy
<!-- Start dropdowns & dropups -->
<div class="container py-7">
  <div class="row">
      <div class="row">
        <div class="col-lg-4 ms-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
          <div class="dropdown">
            <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown button
            </button>
            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-4 me-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
          <div class="btn-group dropup mt-7">
            <button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropup
            </button>
            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
              <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>
<!--   end dropdowns & dropups -->

Selectpicker

Copy
<!--  Start select -->
<div class="container py-7">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="row">
        <div class="col-lg-6 mx-auto col-md-8 col-sm-5">
          <select class="form-control" name="choices-button" id="choices-button" placeholder="Departure">
            <option value="Choice 1" selected="">Brazil</option>
            <option value="Choice 2">Bucharest</option>
            <option value="Choice 3">London</option>
            <option value="Choice 4">USA</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<!--   end select -->


<!-- mandatory scripts -->
<script src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/js/plugins/choices.min.js"></script>
<script>
if (document.getElementById("choices-button")) {
  var element = document.getElementById("choices-button");
  const example = new Choices(element, {});
}
</script>