diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
new file mode 100644
index 0000000000..25322444db
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
@@ -0,0 +1,288 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel
+@{
+    ViewData["Title"] = "ButtonGroups";
+}
+
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
+<h2>Button groups</h2>
+
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/button-group/" target="_blank"> Bootstrap Button group</a>.</p>
+
+<h4>Basic example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-button-group>
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Left&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Middle&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Right&lt;/abp-button&gt;
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Left&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Middle&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Right&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Button toolbar</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-toolbar>
+            <abp-button-group class="mr-2">
+                <abp-button button-type="Secondary">1</abp-button>
+                <abp-button button-type="Secondary">2</abp-button>
+                <abp-button button-type="Secondary">3</abp-button>
+                <abp-button button-type="Secondary">4</abp-button>
+            </abp-button-group>
+            <abp-button-group class="mr-2">
+                <abp-button button-type="Secondary">5</abp-button>
+                <abp-button button-type="Secondary">6</abp-button>
+                <abp-button button-type="Secondary">7</abp-button>
+            </abp-button-group>
+            <abp-button-group>
+                <abp-button button-type="Secondary">8</abp-button>
+            </abp-button-group>
+        </abp-button-toolbar>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+    &lt;abp-button-toolbar&gt;
+    &lt;abp-button-group class=&quot;mr-2&quot;&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;3&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;4&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;abp-button-group class=&quot;mr-2&quot;&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;5&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;6&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;7&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;8&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;/abp-button-toolbar&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-toolbar&quot; role=&quot;toolbar&quot;&gt;
+  &lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;3&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;4&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;5&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;6&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;7&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;8&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Sizing</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group size="Large">
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+        <br><br>
+        <abp-button-group>
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+        <br><br>
+        <abp-button-group size="Small">
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group size=&quot;Large&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group&gt;
+    ...
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group size=&quot;Small&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group btn-group-lg&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+
+&lt;div class=&quot;btn-group btn-group-sm&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Vertical variation</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group>
+            <abp-button button-type="Secondary">1</abp-button>
+            <abp-button button-type="Secondary">2</abp-button>
+            <abp-dropdown>
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-button-group>
+        </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
+    &lt;abp-dropdown&gt;
+        &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot; /&gt;
+        &lt;abp-dropdown-menu&gt;
+            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
+            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
+        &lt;/abp-dropdown-menu&gt;
+    &lt;/abp-dropdown&gt;
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group with nested dropdown&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
+
+  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    &lt;button id=&quot;btnGroupDrop1&quot; 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;
+      Dropdown
+    &lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;btnGroupDrop1&quot;&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Nesting</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group direction="Vertical">
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-dropdown direction="Right">
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-dropdown direction="Left">
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+            <abp-button button-type="Secondary">button</abp-button>
+        </abp-button-group>
+        </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group direction=&quot;Vertical&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group-vertical&quot;&gt;
+  ...
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
new file mode 100644
index 0000000000..dc9ac3c2eb
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class ButtonGroupsModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
\ No newline at end of file