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

<!-- Start dropstart & dropend -->
<div class="container py-7">
  <div class="row">
    <div class="col-12">
      <div class="text-center">
        <div class="btn-group dropstart">
          <button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropstart
          </button>
          <ul class="dropdown-menu px-2 py-3">
            <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="text-center">
        <div class="btn-group dropend">
          <button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropend
          </button>
          <ul class="dropdown-menu px-2 py-3 ms-1">
            <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 -->

<div class="container py-7">
  <div class="row">
    <div class="col-3 mx-auto">
      <select class="form-control" name="choice-button" id="choice-button" placeholder="Language">
        <option value="Choice 1" selected>Brazil</option>
        <option value="Choice 2">Bucharest</option>
        <option value="Choice 3">London</option>
        <option value="Choice 4">Washington</option>
      </select>
    </div>
  </div>
</div>


<!-- mandatory scripts -->
<script src="./assets/js/plugins/choices.min.js"></script>
<script>
if (document.getElementById("choices-button")) {
  var element = document.getElementById("choices-button");
  const example = new Choices(element, {});
}
</script>