diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
index c2c17a389d..367fe710b2 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
@@ -10,19 +10,33 @@
     </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>Tabs</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>
 
-<h4># Most Simple Tabs Example</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
+
         <abp-tabs>
             <abp-tab title="Home">
                 Content_Home
             </abp-tab>
-            <abp-tab-link title="Link" name="LinkId" href="#"/>
+            <abp-tab-link title="Link" href="#" />
             <abp-tab title="profile">
                 Content_Profile
             </abp-tab>
@@ -37,14 +51,16 @@
         </abp-tabs>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-tabs name=&quot;TabId&quot;&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-tabs&gt;
     &lt;abp-tab title=&quot;Home&quot;&gt;
-        Content_Home
-    &lt;/abp-tab&gt;   
-    &lt;abp-tab-link title=&quot;Link&quot; name=&quot;LinkId&quot; href=&quot;#&quot;/&gt;
+             Content_Home
+    &lt;/abp-tab&gt;
+    &lt;abp-tab-link title=&quot;Link&quot; href=&quot;#&quot; /&gt;
     &lt;abp-tab title=&quot;profile&quot;&gt;
-        Content_Profile
+            Content_Profile
     &lt;/abp-tab&gt;
     &lt;abp-tab-dropdown title=&quot;Contact&quot; name=&quot;ContactDropdown&quot;&gt;
         &lt;abp-tab title=&quot;Contact 1&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
@@ -55,11 +71,44 @@
         &lt;/abp-tab&gt;
     &lt;/abp-tab-dropdown&gt;
 &lt;/abp-tabs&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div&gt;
+    &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;48c14227782f4edab7f153b413ac1429&quot; role=&quot;tablist&quot;&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;LinkId-tab&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_2&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item dropdown&quot;&gt;
+            &lt;a class=&quot;nav-link dropdown-toggle&quot; id=&quot;ContactDropdown-tab&quot; data-toggle=&quot;dropdown&quot; href=&quot;#ContactDropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_3&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_3&quot; aria-selected=&quot;false&quot;&gt;Contact 1&lt;/a&gt;
+                &lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_4&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_4&quot; aria-selected=&quot;false&quot;&gt;Contact 2&lt;/a&gt;
+            &lt;/div&gt;
+        &lt;/li&gt;
+    &lt;/ul&gt;
+    &lt;div class=&quot;tab-content&quot; id=&quot;48c14227782f4edab7f153b413ac1429Content&quot;&gt;
+        &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot;&gt;
+              Content_Home
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot;&gt;
+              Content_Profile
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot;&gt;
+              Content_1_Content
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot;&gt;
+              Content_2_Content
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Tabs With Name Attiribute Example</h4>
+<h4>Tab attributes</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -76,7 +125,9 @@
         </abp-tabs>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
 &lt;abp-tabs name=&quot;TabId&quot;&gt;
     &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
         Content_Home
@@ -88,16 +139,50 @@
         Content_Contact
     &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div&gt;
+    &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;TabId&quot; role=&quot;tablist&quot;&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-home-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-home&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;false&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-profile&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active show&quot; id=&quot;nav-contact-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-contact&quot; role=&quot;tab&quot; aria-controls=&quot;nav-contact&quot; aria-selected=&quot;true&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+    &lt;div class=&quot;tab-content&quot; id=&quot;TabIdContent&quot;&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;
+             Content_Home
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;
+             Content_Profile
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade active show&quot; id=&quot;nav-contact&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-contact-tab&quot;&gt;
+             Content_Contact
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+    <div class="attribute-area">
+        <ul>
+            <li>
+                <b>name</b>: Sets "id" attribute of generated elements. Default value is a Guid. Not needed unless tabs are changed or modified with Jquery.
+            </li>
+            <li>
+                <b>active</b>: Sets the active tab.
+            </li>
+        </ul>
     </div>
 </div>
 
-<h4># Pill Example</h4>
+<h4>Pill Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs tab-style="Pill">
-            <abp-tab active="true" title="Home">
+            <abp-tab title="Home">
                 Content_Home
             </abp-tab>
             <abp-tab title="profile">
@@ -109,28 +194,56 @@
         </abp-tabs>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-tabs tab-style=&quot;Pill&quot; &gt;
-    &lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
-        Content_Home
-    &lt;/abp-tab&gt;   
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-tabs tab-style=&quot;Pill&quot;&gt;
+    &lt;abp-tab title=&quot;Home&quot;&gt;
+         Content_Home
+    &lt;/abp-tab&gt;
     &lt;abp-tab title=&quot;profile&quot;&gt;
-        Content_Profile
+         Content_Profile
     &lt;/abp-tab&gt;
     &lt;abp-tab title=&quot;Contact&quot;&gt;
-        Content_Contact
+         Content_Contact
     &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
-</pre>
+
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div&gt;
+    &lt;ul class=&quot;nav nav-pills&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946&quot; role=&quot;tablist&quot;&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
+        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+    &lt;div class=&quot;tab-content&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946Content&quot;&gt;
+        &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot;&gt;
+               Content_Home
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot;&gt;
+               Content_Profile
+        &lt;/div&gt;
+        &lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot;&gt;
+               Content_Contact
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Vertical Example</h4>
+<h4>Vertical Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs tab-style="PillVertical" vertical-header-size="_2">
-            <abp-tab active="true" title="Home">
+            <abp-tab title="Home">
                 Content_Home
             </abp-tab>
             <abp-tab title="profile">
@@ -142,8 +255,10 @@
         </abp-tabs>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-tabs name=&quot;TabId&quot;  tab-style=&quot;Pill&quot; vertical-header-size=&quot;_2&quot; &gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-tabs tab-style=&quot;PillVertical&quot; vertical-header-size=&quot;_2&quot; &gt;
     &lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
         Content_Home
     &lt;/abp-tab&gt;   
@@ -154,6 +269,44 @@
         Content_Contact
     &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
-</pre>
+
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-2&quot;&gt;
+        &lt;ul class=&quot;nav flex-column  nav-pills&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f&quot; role=&quot;tablist&quot;&gt;
+            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
+            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-10&quot;&gt;
+        &lt;div class=&quot;tab-content&quot; id=&quot;2f347a2276af424ebbd67f85653edf1fContent&quot;&gt;
+            &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot;&gt;
+                 Content_Home
+            &lt;/div&gt;
+            &lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot;&gt;
+                 Content_Profile
+            &lt;/div&gt;
+            &lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot;&gt;
+                 Content_Contact
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
+
+    <div class="attribute-area">
+        <ul>
+            <li>
+                <b>vertical-header-size</b>: Sets the column width of tab headers.
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file