diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
index 47d332e134..7a698f8b64 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
@@ -56,15 +56,15 @@
             </abp-tab>
             <abp-tab title="Rendered">
                 <pre><code>
-&lt;div class=&quot;dropdown&quot;&gt;
-  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Dropdown button
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
-  &lt;/div&gt;
+&lt;div class=&quot;demo-area&quot;&gt;
+    &lt;div class=&quot;btn-group&quot;&gt;
+       &lt;button class=&quot;dropdown-toggle btn&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
+      &lt;div class=&quot;dropdown-menu&quot;&gt;
+         &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             </abp-tab>
@@ -100,16 +100,13 @@
             </abp-tab>
             <abp-tab title="Rendered">
                 <pre><code>
-&lt;div class=&quot;dropdown&quot;&gt;
-  &lt;a class=&quot;btn btn-secondary dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; id=&quot;dropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Dropdown link
-  &lt;/a&gt;
-
-  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuLink&quot;&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
-  &lt;/div&gt;
+&lt;div class=&quot;btn-group&quot;&gt;
+    &lt;a class=&quot;dropdown-toggle btn btn-secondary&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; data-busy-text=&quot;Processing...&quot; roles=&quot;button&quot; href=&quot;#&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/a&gt;
+    &lt;div class=&quot;dropdown-menu&quot;&gt;
+       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             </abp-tab>
@@ -184,16 +181,14 @@
 &lt;!-- Example single danger button --&gt;
 
 &lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Action
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
-    &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
-  &lt;/div&gt;
+    &lt;button class=&quot;dropdown-toggle btn btn-danger&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu&quot;&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             </abp-tab>
@@ -270,17 +265,15 @@
 &lt;!-- Example single danger button --&gt;
 
 &lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
-    &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
-    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
-  &lt;/div&gt;
+     &lt;button class=&quot;btn btn-danger&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
+     &lt;button data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-danger&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
+     &lt;div class=&quot;dropdown-menu&quot;&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+     &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             </abp-tab>
@@ -370,46 +363,48 @@
             <abp-tab title="Rendered">
                 <pre><code>
 &lt;!-- Large button groups (default and split) --&gt;
-&lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button class=&quot;btn btn-secondary btn-lg dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Large button
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button class=&quot;btn btn-secondary btn-lg&quot; type=&quot;button&quot;&gt;
-    Large split button
-  &lt;/button&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;!-- Small button groups (default and split) --&gt;
-&lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button class=&quot;btn btn-secondary btn-sm dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Small button
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button class=&quot;btn btn-secondary btn-sm&quot; type=&quot;button&quot;&gt;
-    Small split button
-  &lt;/button&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu&quot;&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
+        &lt;div class=&quot;btn-group&quot;&gt;
+            &lt;button class=&quot;dropdown-toggle btn btn-secondary btn-lg&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Large button&lt;/span&gt;&lt;/button&gt;
+            &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;btn-group&quot;&gt;
+            &lt;button class=&quot;btn btn-secondary btn-lg&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Large split button&lt;/span&gt;&lt;/button&gt;
+            &lt;button data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-secondary btn-lg&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
+            &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;btn-group&quot;&gt;
+            &lt;button class=&quot;dropdown-toggle btn btn-secondary btn-sm&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Small button&lt;/span&gt;&lt;/button&gt;
+            &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;btn-group&quot;&gt;
+            &lt;button class=&quot;btn btn-secondary btn-sm&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Small split button&lt;/span&gt;&lt;/button&gt;
+            &lt;button data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-secondary btn-sm&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
+            &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
 </code></pre>
             </abp-tab>
         </abp-tabs>
@@ -592,14 +587,14 @@
             <abp-tab title="Rendered">
                 <pre><code>
 &lt;div class=&quot;btn-group&quot;&gt;
-  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
-    Right-aligned
-  &lt;/button&gt;
-  &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
-    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Action&lt;/button&gt;
-    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Another action&lt;/button&gt;
-    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Something else here&lt;/button&gt;
-  &lt;/div&gt;
+        &lt;button class=&quot;dropdown-toggle btn btn-secondary&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Right-aligned&lt;/span&gt;&lt;/button&gt;
+    &lt;div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot; x-placement=&quot;bottom-end&quot; style=&quot;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(135px, 38px, 0px);&quot;&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item active&quot;&gt;Active action&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item disabled&quot;&gt;Disabled action&lt;/a&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             </abp-tab>