diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
index ea379156a4..39b079f802 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
@@ -26,15 +26,30 @@
 
 <abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
     <abp-button size="Large" button-type="Primary" text="Large button" />
-    <abp-button size="Small" button-type="Primary" text="Small button" />
     <abp-button size="Large" button-type="Secondary" text="Large button" />
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button size="Small" button-type="Primary" text="Small button" />
     <abp-button size="Small" button-type="Secondary" text="Small button" />
-    <hr />
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
     <abp-button size="Block" button-type="Primary" text="Block level button" />
     <abp-button size="Block" button-type="Secondary" text="Block level button" />
 </abp-component-demo-section>
 
+<abp-component-demo-section title="Active State" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button size="Large" button-type="Primary" class="active" text="Primary button" />
+    <abp-button size="Large" button-type="Secondary" class="active" text="Button" />
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Disabled State" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button size="Large" button-type="Primary" disabled="true" text="Primary button" />
+    <abp-button size="Large" button-type="Secondary" disabled="true" text="Button" />
+</abp-component-demo-section>
+
 <abp-component-demo-section title="Icons" view-path="@ButtonsDemoViewComponent.ViewPath">
     <abp-button button-type="Warning" icon="pencil" text="Edit" />
     <abp-button button-type="Info" icon-type="FontAwesome" icon="info" text="Information" />
-</abp-component-demo-section>
\ No newline at end of file
+</abp-component-demo-section>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
index b37c877f34..1e5e491233 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
@@ -2,7 +2,7 @@
 
 <abp-component-demo-section title="Example" view-path="@CardsDemoViewComponent.ViewPath">
     <abp-card style="width: 18rem;">
-        <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
+        <img abp-card-image="Top" src="https://via.placeholder.com/300x200.png?text=Image+cap" />
         <abp-card-body>
             <abp-card-title>Card Title</abp-card-title>
             <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
@@ -46,7 +46,7 @@
 
 <abp-component-demo-section title="Kitchen sink" view-path="@CardsDemoViewComponent.ViewPath">
     <abp-card style="width: 18rem;">
-        <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
+        <img abp-card-image="Top" src="https://via.placeholder.com/300x200.png?text=Image+cap" />
         <abp-card-body>
             <abp-card-title>Card Title</abp-card-title><abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
         </abp-card-body>
@@ -97,6 +97,78 @@
     </abp-card>
 </abp-component-demo-section>
 
+<abp-component-demo-section title="Sizing with grid markup" view-path="@CardsDemoViewComponent.ViewPath">
+    <div class="row">
+        <div class="col-md-6">
+            <abp-card>
+                <abp-card-header>Quote</abp-card-header>
+                <abp-card-body>
+                    <abp-blockquote>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                        <footer>Someone famous in Source Title</footer>
+                    </abp-blockquote>
+                </abp-card-body>
+            </abp-card>
+        </div>
+        <div class="col-md-6">
+            <abp-card class="text-center">
+                <abp-card-header>Featured</abp-card-header>
+                <abp-card-body>
+                    <abp-card-title> Special title treatment</abp-card-title>
+                    <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+                    <a abp-button="Primary" href="#"> Go somewhere</a>
+                </abp-card-body>
+                <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
+            </abp-card>
+        </div>
+    </div>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Sizing with utilities" view-path="@CardsDemoViewComponent.ViewPath">
+    <abp-card class="w-75">
+        <abp-card-header>Quote</abp-card-header>
+        <abp-card-body>
+            <abp-blockquote>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in Source Title</footer>
+            </abp-blockquote>
+        </abp-card-body>
+    </abp-card>
+    <abp-card  class="text-center w-50">
+        <abp-card-header>Featured</abp-card-header>
+        <abp-card-body>
+            <abp-card-title> Special title treatment</abp-card-title>
+            <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            <a abp-button="Primary" href="#"> Go somewhere</a>
+        </abp-card-body>
+        <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
+    </abp-card>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Text alignment" view-path="@CardsDemoViewComponent.ViewPath">
+    <abp-card class="text-left" style="width: 18rem;">
+        <abp-card-body>
+            <abp-card-title> Special title treatment</abp-card-title>
+            <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            <a abp-button="Primary" href="#"> Go somewhere</a>
+        </abp-card-body>
+    </abp-card>
+    <abp-card class="text-center" style="width: 18rem;">
+        <abp-card-body>
+            <abp-card-title> Special title treatment</abp-card-title>
+            <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            <a abp-button="Primary" href="#"> Go somewhere</a>
+        </abp-card-body>
+    </abp-card>
+    <abp-card class="text-right" style="width: 18rem;">
+        <abp-card-body>
+            <abp-card-title> Special title treatment</abp-card-title>
+            <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            <a abp-button="Primary" href="#"> Go somewhere</a>
+        </abp-card-body>
+    </abp-card>
+</abp-component-demo-section>
+
 <abp-component-demo-section title="Card Styles" view-path="@CardsDemoViewComponent.ViewPath">
     <abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
         <abp-card-header>Featured</abp-card-header>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DropdownsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DropdownsDemo/Default.cshtml
index f21d4fc3c7..1a9587b600 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DropdownsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DropdownsDemo/Default.cshtml
@@ -10,9 +10,6 @@
             <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
         </abp-dropdown-menu>
     </abp-dropdown>
-</abp-component-demo-section>
-
-<abp-component-demo-section title="Single button 2" view-path="@DropdownsDemoViewComponent.ViewPath">
     <abp-dropdown>
         <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
         <abp-dropdown-menu>
@@ -21,9 +18,6 @@
             <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
         </abp-dropdown-menu>
     </abp-dropdown>
-</abp-component-demo-section>
-
-<abp-component-demo-section title="Single button 3" view-path="@DropdownsDemoViewComponent.ViewPath">
     <abp-dropdown>
         <abp-dropdown-button button-type="Danger" text="Dropdown button" />
         <abp-dropdown-menu>
@@ -47,9 +41,6 @@
             <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
         </abp-dropdown-menu>
     </abp-dropdown>
-</abp-component-demo-section>
-
-<abp-component-demo-section title="Split button 2" view-path="@DropdownsDemoViewComponent.ViewPath">
     <abp-dropdown>
         <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
         <abp-dropdown-menu>
@@ -59,7 +50,8 @@
             <abp-dropdown-divider />
             <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
         </abp-dropdown-menu>
-    </abp-dropdown><abp-dropdown>
+    </abp-dropdown>
+    <abp-dropdown>
         <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
         <abp-dropdown-menu>
             <abp-dropdown-item href="#">Action</abp-dropdown-item>
@@ -68,7 +60,8 @@
             <abp-dropdown-divider />
             <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
         </abp-dropdown-menu>
-    </abp-dropdown><abp-dropdown>
+    </abp-dropdown>
+    <abp-dropdown>
         <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
         <abp-dropdown-menu>
             <abp-dropdown-item href="#">Action</abp-dropdown-item>
@@ -77,7 +70,8 @@
             <abp-dropdown-divider />
             <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
         </abp-dropdown-menu>
-    </abp-dropdown><abp-dropdown>
+    </abp-dropdown>
+    <abp-dropdown>
         <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
         <abp-dropdown-menu>
             <abp-dropdown-item href="#">Action</abp-dropdown-item>
@@ -89,6 +83,7 @@
     </abp-dropdown>
 </abp-component-demo-section>
 
+
 <abp-component-demo-section title="Directions" view-path="@DropdownsDemoViewComponent.ViewPath">
     <abp-dropdown direction="Up">
         <abp-dropdown-button button-type="Secondary" text="Dropup" />
@@ -97,14 +92,16 @@
             <abp-dropdown-item href="#">Another action</abp-dropdown-item>
             <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
         </abp-dropdown-menu>
-    </abp-dropdown><abp-dropdown direction="Right">
+    </abp-dropdown>
+    <abp-dropdown direction="Right">
         <abp-dropdown-button button-type="Secondary" text="dropright" />
         <abp-dropdown-menu>
             <abp-dropdown-item href="#">Action</abp-dropdown-item>
             <abp-dropdown-item href="#">Another action</abp-dropdown-item>
             <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
         </abp-dropdown-menu>
-    </abp-dropdown><abp-dropdown direction="Right">
+    </abp-dropdown>
+    <abp-dropdown direction="Right">
         <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
         <abp-dropdown-menu>
             <abp-dropdown-item href="#">Action</abp-dropdown-item>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DynamicFormsDemo/DynamicFormsDemoViewComponent.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DynamicFormsDemo/DynamicFormsDemoViewComponent.cs
index 63b411f1a2..3681eda627 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DynamicFormsDemo/DynamicFormsDemoViewComponent.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/DynamicFormsDemo/DynamicFormsDemoViewComponent.cs
@@ -6,7 +6,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S
     [Widget]
     public class DynamicFormsDemoViewComponent : AbpViewComponent
     {
-        public const string ViewPath = "/Views/Components/Themes/Shared/Demos/DynamicForms/Default.cshtml";
+        public const string ViewPath = "/Views/Components/Themes/Shared/Demos/DynamicFormsDemo/Default.cshtml";
 
         public IViewComponentResult Invoke()
         {
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/FormElementsDemo/FormElementsDemoViewComponent.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/FormElementsDemo/FormElementsDemoViewComponent.cs
index ef1f509e02..01c477ecb1 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/FormElementsDemo/FormElementsDemoViewComponent.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/FormElementsDemo/FormElementsDemoViewComponent.cs
@@ -6,7 +6,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S
     [Widget]
     public class FormElementsDemoViewComponent : AbpViewComponent
     {
-        public const string ViewPath = "/Views/Components/Themes/Shared/Demos/FormElements/Default.cshtml";
+        public const string ViewPath = "/Views/Components/Themes/Shared/Demos/FormElementsDemo/Default.cshtml";
 
         public IViewComponentResult Invoke()
         {