Dropdown and Dropup
<!-- 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
<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>