1
2 // Large Dropdown
3 <div class="dropdown">
4 <button
5 class="btn btn-secondary dropdown-toggle"
6 type="button"
7 id="dropdownMenuButton1"
8 data-bs-toggle="dropdown"
9 aria-expanded="false"
10 >
11 Large Dropdown
12 </button>
13 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
14 <li>
15 <a class="dropdown-item" href="#">
16 Action
17 </a>
18 </li>
19 <li>
20 <a class="dropdown-item" href="#">
21 Another action
22 </a>
23 </li>
24 <li>
25 <a class="dropdown-item" href="#">
26 Something else here
27 </a>
28 </li>
29 </ul>
30 </div>
31
32 // Large Split Dropdown
33 <div class="btn-group">
34 <button class="btn btn-secondary btn-lg" type="button">
35 Large Split Dropdown
36 </button>
37 <button
38 type="button"
39 class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
40 data-bs-toggle="dropdown"
41 aria-expanded="false"
42 >
43 <span class="visually-hidden">Toggle Dropdown</span>
44 </button>
45 <ul class="dropdown-menu">
46 <li>
47 <a class="dropdown-item" href="#">
48 Action
49 </a>
50 </li>
51 <li>
52 <a class="dropdown-item" href="#">
53 Another action
54 </a>
55 </li>
56 <li>
57 <a class="dropdown-item" href="#">
58 Something else here
59 </a>
60 </li>
61 </ul>
62 </div>
63
64 // Small Dropdown
65 <div class="btn-group">
66 <button
67 class="btn btn-secondary btn-sm dropdown-toggle"
68 type="button"
69 data-bs-toggle="dropdown"
70 aria-expanded="false"
71 >
72 Small dropdown
73 </button>
74 <ul class="dropdown-menu">
75 <li>
76 <a class="dropdown-item" href="#">
77 Action
78 </a>
79 </li>
80 <li>
81 <a class="dropdown-item" href="#">
82 Another action
83 </a>
84 </li>
85 <li>
86 <a class="dropdown-item" href="#">
87 Something else here
88 </a>
89 </li>
90 </ul>
91 </div>
92
93 // Small Split Dropdown
94 <div class="btn-group">
95 <button class="btn btn-secondary btn-sm" type="button">
96 Small split dropdown
97 </button>
98 <button
99 type="button"
100 class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
101 data-bs-toggle="dropdown"
102 aria-expanded="false"
103 >
104 <span class="visually-hidden">Toggle Dropdown</span>
105 </button>
106 <ul class="dropdown-menu">
107 <li>
108 <a class="dropdown-item" href="#">
109 Action
110 </a>
111 </li>
112 <li>
113 <a class="dropdown-item" href="#">
114 Another action
115 </a>
116 </li>
117 <li>
118 <a class="dropdown-item" href="#">
119 Something else here
120 </a>
121 </li>
122 </ul>
123 </div>
124