dropdown forms in bootstrap

1<div class="dropdown">
2  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3    Dropdown
4  </button>
5  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
6    <button class="dropdown-item" type="button">Action</button>
7    <button class="dropdown-item" type="button">Another action</button>
8    <button class="dropdown-item" type="button">Something else here</button>
9  </div>
10</div>

1<!-- Bootstrap 5 Dropdown -->
2<div class="dropdown">
3   <button
4      class="btn btn-secondary dropdown-toggle"
5      type="button"
6      id="dropdownMenuButton1"
7      data-bs-toggle="dropdown"
8      aria-expanded="false"
9   >
10      Dropdown button
11   </button>
12   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
13      <li><a class="dropdown-item" href="#">Action</a></li>
14      <li><a class="dropdown-item" href="#">Another action</a></li>
15      <li><a class="dropdown-item" href="#">Something else here</a></li>
16   </ul>
17</div>

1          <li class="dropdown">
2         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown            
3
4         <b class="caret"></b></a>
5         <ul class="dropdown-menu">
6           <li><a href="#"><form role="form">
7<div class="form-group">
8  <label for="sel1">Select list (select one):</label>
9  <select class="form-control" id="sel1">
10    <option>1</option>
11    <option>2</option>
12    <option>3</option>
13    <option>4</option>
14  </select>
15  <br>
16  <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
17  <select multiple class="form-control" id="sel2">
18    <option>1</option>
19    <option>2</option>
20    <option>3</option>
21    <option>4</option>
22    <option>5</option>
23  </select>
24</div>
25

1Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox
2or radio style button toggling. Add data-toggle="buttons" to a .btn-group 
3containing those modified buttons to enable their toggling behavior via 
4JavaScript and add .btn-group-toggle to style the <input>s within your buttons.
5Note that you can create single input-powered buttons or groups of them.
6
7The checked state for these buttons is only updated via click event on the 
8button. If you use another method to update the input—e.g., with 
9<input type="reset"> or by manually applying the input’s checked 
10property—you’ll need to toggle .active on the <label> manually.
11
12Note that pre-checked buttons require you to manually add the .active class to 
13the input’s <label>.
14
15<div class="btn-group-toggle" data-toggle="buttons">
16  <label class="btn btn-secondary active">
17    <input type="checkbox" checked> Checked
18  </label>
19</div>