diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
index 4957fd3636..097b670e70 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
@@ -10,260 +10,838 @@
     </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>Grids</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/layout/grid/" target="_blank"> Bootstrap grid</a>.</p>
 
-<h4># Example</h4>
+<h4>Equal-width</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid">
         <abp-container>
             <abp-row>
-                <abp-column size-sm="_6">One of two columns</abp-column>
-                <abp-column size-sm="_6">One of two columns</abp-column>
+                <abp-column>1 of 2</abp-column>
+                <abp-column>2 of 2</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column>1 of 3</abp-column>
+                <abp-column>2 of 3</abp-column>
+                <abp-column>3 of 3</abp-column>
             </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;1 of 2&lt;/abp-column&gt;
+                &lt;abp-column&gt;2 of 2&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;1 of 3&lt;/abp-column&gt;
+                &lt;abp-column&gt;2 of 3&lt;/abp-column&gt;
+                &lt;abp-column&gt;3 of 3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;1 of 2&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;2 of 2&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;2 of 3&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;3 of 3&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Column Breaker</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-container>
             <abp-row>
-                <abp-column size-sm="_4">One of three columns</abp-column>
-                <abp-column size-sm="_4">One of three columns</abp-column>
-                <abp-column size-sm="_4">One of three columns</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column-breaker />
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-container&gt;
-     &lt;abp-row&gt;
-         &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
-         &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
-     &lt;abp-row&gt;
-         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
-&lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column-breaker/&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;w-100&quot;&gt;&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Break Column Example</h4>
+<h4>Setting one column width</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid">
         <abp-container>
             <abp-row>
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
-                <abp-col-break /> @* TODO: abp-column-break *@
-                <abp-column>One of three columns</abp-column>
+                <abp-column>1 of 3</abp-column>
+                <abp-column size="_6">2 of 3 (wider)</abp-column>
+                <abp-column>3 of 3</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column>1 of 3</abp-column>
+                <abp-column size="_5">2 of 3 (wider)</abp-column>
+                <abp-column>3 of 3</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
- &lt;abp-container&gt;
-     &lt;abp-row&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-col-break /&gt; @* TODO: abp-column-break *@
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
- &lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;1 of 3&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_6&quot;&gt;2 of 3 (wider)&lt;/abp-column&gt;
+                &lt;abp-column&gt;3 of 3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;1 of 3&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_5&quot;&gt;2 of 3 (wider)&lt;/abp-column&gt;
+                &lt;abp-column&gt;3 of 3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
+                &lt;div class=&quot;col col-6&quot;&gt;2 of 3 (wider)&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;3 of 3&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
+                &lt;div class=&quot;col col-5&quot;&gt;2 of 3 (wider)&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;3 of 3&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Vertical alignment Example</h4>
+<h4>Variable width content</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid">
+        <abp-container>
+            <abp-row h-align="Center">
+                <abp-column size-lg="_2">1 of 3</abp-column>
+                <abp-column size-md="Auto">Variable width content</abp-column>
+                <abp-column size-lg="_2">3 of 3</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column>1 of 3</abp-column>
+                <abp-column size-md="Auto">Variable width content</abp-column>
+                <abp-column size-lg="_2">3 of 3</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row h-align=&quot;Center&quot;&gt;
+                &lt;abp-column size-lg=&quot;_2&quot;&gt;1 of 3&lt;/abp-column&gt;
+                &lt;abp-column size-md=&quot;Auto&quot;&gt;Variable width content&lt;/abp-column&gt;
+                &lt;abp-column size-lg=&quot;_2&quot;&gt;3 of 3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;1 of 3&lt;/abp-column&gt;
+                &lt;abp-column size-md=&quot;Auto&quot;&gt;Variable width content&lt;/abp-column&gt;
+                &lt;abp-column size-lg=&quot;_2&quot;&gt;3 of 3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row justify-content-center&quot;&gt;
+                &lt;div class=&quot;col col-lg-2&quot;&gt;1 of 3&lt;/div&gt;
+                &lt;div class=&quot;col col-md-auto&quot;&gt;Variable width content&lt;/div&gt;
+                &lt;div class=&quot;col col-lg-2&quot;&gt;3 of 3&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
+                &lt;div class=&quot;col col-md-auto&quot;&gt;Variable width content&lt;/div&gt;
+                &lt;div class=&quot;col col-lg-2&quot;&gt;3 of 3&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Responsive classes</h4>
+
+<h5>All breakpoints</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-row>
+            <abp-column>col</abp-column>
+            <abp-column>col</abp-column>
+            <abp-column>col</abp-column>
+            <abp-column>col</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size="_8">col-8</abp-column>
+            <abp-column size="_4">col-4</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+            &lt;abp-row&gt;
+                &lt;abp-column&gt;col&lt;/abp-column&gt;
+                &lt;abp-column&gt;col&lt;/abp-column&gt;
+                &lt;abp-column&gt;col&lt;/abp-column&gt;
+                &lt;abp-column&gt;col&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size=&quot;_8&quot;&gt;col-8&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;col-4&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-8&quot;&gt;col-8&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;col-4&lt;/div&gt;
+            &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h5>All breakpoints</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-row>
+            <abp-column size-sm="_8">col-sm-8</abp-column>
+            <abp-column size-sm="_4">col-sm-4</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size-sm="_">col-sm</abp-column>
+            <abp-column size-sm="_">col-sm</abp-column>
+            <abp-column size-sm="_">col-sm</abp-column>
+            <abp-column size-sm="_">col-sm</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-row&gt;
+            &lt;abp-column size-sm=&quot;_8&quot;&gt;col-sm-8&lt;/abp-column&gt;
+            &lt;abp-column size-sm=&quot;_4&quot;&gt;col-sm-4&lt;/abp-column&gt;
+        &lt;/abp-row&gt;
+        &lt;abp-row&gt;
+            &lt;abp-column size-sm=&quot;_&quot;&gt;col-sm&lt;/abp-column&gt;
+            &lt;abp-column size-sm=&quot;_&quot;&gt;col-sm&lt;/abp-column&gt;
+            &lt;abp-column size-sm=&quot;_&quot;&gt;col-sm&lt;/abp-column&gt;
+            &lt;abp-column size-sm=&quot;_&quot;&gt;col-sm&lt;/abp-column&gt;
+        &lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+         &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col col-sm-8&quot;&gt;col-sm-8&lt;/div&gt;
+            &lt;div class=&quot;col col-sm-4&quot;&gt;col-sm-4&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col col-sm&quot;&gt;col-sm&lt;/div&gt;
+            &lt;div class=&quot;col col-sm&quot;&gt;col-sm&lt;/div&gt;
+            &lt;div class=&quot;col col-sm&quot;&gt;col-sm&lt;/div&gt;
+            &lt;div class=&quot;col col-sm&quot;&gt;col-sm&lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h5>Mix and match</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-row>
+            <abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column>
+            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size="_6">.col-6</abp-column>
+            <abp-column size="_6">.col-6</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;!-- Stack the columns on mobile by making one full-width and the other half-width -->
+        &lt;abp-row&gt;
+            &lt;abp-column size=&quot;_12&quot; size-md=&quot;_8&quot;&gt;.col-12 .col-md-8&lt;/abp-column&gt;
+            &lt;abp-column size=&quot;_6&quot; size-md=&quot;_4&quot;&gt;.col-6 .col-md-4&lt;/abp-column&gt;
+        &lt;/abp-row&gt;
+
+        &lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+        &lt;abp-row&gt;
+            &lt;abp-column size=&quot;_6&quot; size-md=&quot;_4&quot;&gt;.col-6 .col-md-4&lt;/abp-column&gt;
+            &lt;abp-column size=&quot;_6&quot; size-md=&quot;_4&quot;&gt;.col-6 .col-md-4&lt;/abp-column&gt;
+            &lt;abp-column size=&quot;_6&quot; size-md=&quot;_4&quot;&gt;.col-6 .col-md-4&lt;/abp-column&gt;
+        &lt;/abp-row&gt;
+
+        &lt;!-- Columns are always 50% wide, on mobile and desktop -->
+        &lt;abp-row&gt;
+            &lt;abp-column size=&quot;_6&quot;&gt;.col-6&lt;/abp-column&gt;
+            &lt;abp-column size=&quot;_6&quot;&gt;.col-6&lt;/abp-column&gt;
+        &lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col col-12 col-md-8&quot;&gt;.col-12 .col-md-8&lt;/div&gt;
+            &lt;div class=&quot;col col-6 col-md-4&quot;&gt;.col-6 .col-md-4&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col col-6 col-md-4&quot;&gt;.col-6 .col-md-4&lt;/div&gt;
+            &lt;div class=&quot;col col-6 col-md-4&quot;&gt;.col-6 .col-md-4&lt;/div&gt;
+            &lt;div class=&quot;col col-6 col-md-4&quot;&gt;.col-6 .col-md-4&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col col-6&quot;&gt;.col-6&lt;/div&gt;
+            &lt;div class=&quot;col col-6&quot;&gt;.col-6&lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Alignment</h4>
+
+<h5>Vertical Alignment</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid large-row">
         <abp-container>
             <abp-row v-align="Start">
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
             </abp-row>
             <abp-row v-align="Center">
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
             </abp-row>
             <abp-row v-align="End">
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
-                <abp-column>One of three columns</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
+                <abp-column>column</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-container&gt;
-     &lt;abp-row v-align=&quot;Start&quot;&gt;
-        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
-     &lt;abp-row v-align=&quot;Center&quot;&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
-     &lt;abp-row v-align=&quot;End&quot;&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
- &lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row v-align=&quot;Start&quot;&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row v-align=&quot;Center&quot;&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row v-align=&quot;End&quot;&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+                &lt;abp-column&gt;column&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row align-items-start&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row align-items-center&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row align-items-end&quot;&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;column&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Vertical alignment Example 2</h4>
-
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid large-row">
         <abp-container>
-            <abp-row>
-                <abp-column v-align="Start">One of three columns</abp-column>
-                <abp-column v-align="Center">One of three columns</abp-column>
-                <abp-column v-align="End">One of three columns</abp-column>
+            <abp-row v-align="Start">
+                <abp-column v-align="Start">column</abp-column>
+                <abp-column v-align="Center">column</abp-column>
+                <abp-column v-align="End">column</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
- &lt;abp-container&gt;
-    &lt;abp-row&gt;
-        &lt;abp-column v-align=&quot;Start&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column v-align=&quot;Center&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column v-align=&quot;End&quot;&gt;One of three columns&lt;/abp-column&gt;
-     &lt;/abp-row&gt;
- &lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row v-align=&quot;Start&quot;&gt;
+                &lt;abp-column v-align=&quot;Start&quot;&gt;column&lt;/abp-column&gt;
+                &lt;abp-column v-align=&quot;Center&quot;&gt;column&lt;/abp-column&gt;
+                &lt;abp-column v-align=&quot;End&quot;&gt;column&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row align-items-start&quot;&gt;
+                &lt;div class=&quot;col align-self-start&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col align-self-center&quot;&gt;column&lt;/div&gt;
+                &lt;div class=&quot;col align-self-end&quot;&gt;column&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Horizontal alignment Example</h4>
+<h5>Horizontal alignment</h5>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid">
         <abp-container>
             <abp-row h-align="Start">
-                <abp-column size="_4">One of three columns</abp-column>
-                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
             </abp-row>
             <abp-row h-align="Center">
-                <abp-column size="_4">One of three columns</abp-column>
-                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
             </abp-row>
             <abp-row h-align="End">
-                <abp-column size="_4">One of three columns</abp-column>
-                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
             </abp-row>
             <abp-row h-align="Around">
-                <abp-column size="_4">One of three columns</abp-column>
-                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
             </abp-row>
             <abp-row h-align="Between">
-                <abp-column size="_4">One of three columns</abp-column>
-                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+                <abp-column size="_4">One of two columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row h-align=&quot;Start&quot;&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row h-align=&quot;Center&quot;&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row h-align=&quot;End&quot;&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row h-align=&quot;Around&quot;&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row h-align=&quot;Between&quot;&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row justify-content-start&quot;&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row justify-content-center&quot;&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row justify-content-end&quot;&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row justify-content-around&quot;&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row justify-content-between&quot;&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h5>No gutters</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-row gutters="false">
+            <abp-column size="_8">One of two columns</abp-column>
+            <abp-column size="_4">One of two columns</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+            &lt;abp-row gutters=&quot;false&quot;&gt;
+                &lt;abp-column size=&quot;_8&quot;&gt;One of two columns&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;One of two columns&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+            &lt;div class=&quot;row no-gutters&quot;&gt;
+                &lt;div class=&quot;col col-8&quot;&gt;One of two columns&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;One of two columns&lt;/div&gt;
+            &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h5>Column wrapping</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-row>
+            <abp-column size="_9">.col-9</abp-column>
+            <abp-column size="_4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</abp-column>
+            <abp-column size="_6">.col-6<br>Subsequent columns continue along the new line.s</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+            &lt;abp-row&gt;
+                &lt;abp-column size=&quot;_9&quot;&gt;.col-9&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_4&quot;&gt;.col-4&lt;br&gt;Since 9 + 4 = 13 &amp;gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.&lt;/abp-column&gt;
+                &lt;abp-column size=&quot;_6&quot;&gt;.col-6&lt;br&gt;Subsequent columns continue along the new line.s&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-9&quot;&gt;.col-9&lt;/div&gt;
+                &lt;div class=&quot;col col-4&quot;&gt;.col-4&lt;br&gt;Since 9 + 4 = 13 &amp;gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.&lt;/div&gt;
+                &lt;div class=&quot;col col-6&quot;&gt;.col-6&lt;br&gt;Subsequent columns continue along the new line.s&lt;/div&gt;
+            &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Reordering</h4>
+
+<h5>Order classes</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-container>
+            <abp-row>
+                <abp-column order="_12">First, but Last</abp-column>
+                <abp-column>Second, but unordered</abp-column>
+                <abp-column order="_6">Third, but Second</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column order=&quot;_12&quot;&gt;First, but Last&lt;/abp-column&gt;
+                &lt;abp-column&gt;Second, but unordered&lt;/abp-column&gt;
+                &lt;abp-column order=&quot;_6&quot;&gt;Third, but Second&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col order-12&quot;&gt;First, but Last&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;Second, but unordered&lt;/div&gt;
+                &lt;div class=&quot;col order-6&quot;&gt;Third, but Second&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area grid">
+        <abp-container>
+            <abp-row>
+                <abp-column order="Last">First, but Last</abp-column>
+                <abp-column>Second, but unordered</abp-column>
+                <abp-column order="First">Third, but First</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
- &lt;abp-container&gt;
-    &lt;abp-row h-align=&quot;Start&quot;&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
-    &lt;abp-row h-align=&quot;Center&quot;&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
-    &lt;abp-row h-align=&quot;End&quot;&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
-        &lt;abp-row h-align=&quot;Around&quot;&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
-    &lt;abp-row h-align=&quot;Between&quot;&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
- &lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column order=&quot;Last&quot;&gt;First, but Last&lt;/abp-column&gt;
+                &lt;abp-column&gt;Second, but unordered&lt;/abp-column&gt;
+                &lt;abp-column order=&quot;First&quot;&gt;Third, but First&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col order-last&quot;&gt;First, but Last&lt;/div&gt;
+                &lt;div class=&quot;col&quot;&gt;Second, but unordered&lt;/div&gt;
+                &lt;div class=&quot;col order-first&quot;&gt;Third, but First&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Order Example</h4>
+<h4>Offsetting columns</h4>
+
+<h5>Offset classes</h5>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area grid">
         <abp-container>
             <abp-row>
-                <abp-column> First, but unordered</abp-column>
-                <abp-column order="_12">Second, but last</abp-column>
-                <abp-column order="_1">Third, but first</abp-column>
+                <abp-column size-md="_4">.col-md-4</abp-column>
+                <abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
+                <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
             </abp-row>
             <abp-row>
-                <abp-column> First, but unordered</abp-column>
-                <abp-column order="Last">Second, but last</abp-column>
-                <abp-column order="First">Third, but first</abp-column>
+                <abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
             </abp-row>
         </abp-container>
     </div>
     <div class="code-area">
-        <pre>
- &lt;abp-container&gt;
-    &lt;abp-row&gt;
-        &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
-        &lt;abp-column order=&quot;C12&quot;&gt;Second, but last&lt;/abp-column&gt;
-        &lt;abp-column order=&quot;C1&quot;&gt;Third, but first&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
-    &lt;abp-row&gt;
-        &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
-        &lt;abp-column order=&quot;Last&quot;&gt;Second, but last&lt;/abp-column&gt;
-        &lt;abp-column order=&quot;First&quot;&gt;Third, but first&lt;/abp-column&gt;
-    &lt;/abp-row&gt;
- &lt;/abp-container&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size-md=&quot;_4&quot;&gt;.col-md-4&lt;/abp-column&gt;
+                &lt;abp-column size-md=&quot;_4&quot; offset-md=&quot;_4&quot;&gt;.col-md-4 .offset-md-4&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size-md=&quot;_3&quot; offset-md=&quot;_3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
+                &lt;abp-column size-md=&quot;_3&quot; offset-md=&quot;_3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size-md=&quot;_6&quot; offset-md=&quot;_3&quot;&gt;.col-md-6 .offset-md-3&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
+                &lt;div class=&quot;col col-md-4 offset-md-4&quot;&gt;.col-md-4 .offset-md-4&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt;
+                &lt;div class=&quot;col col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-md-6 offset-md-3&quot;&gt;.col-md-6 .offset-md-3&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Offset Example</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area">
-        <abp-row>
-            <abp-column> .col-md-4</abp-column>
-            <abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
-        </abp-row>
-        <abp-row>
-            <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
-            <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
-        </abp-row>
-        <abp-row>
-            <abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
-        </abp-row>
+    <div class="demo-area grid">
+        <abp-container>
+            <abp-row>
+                <abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column>
+                <abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column>
+                <abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column>
+            </abp-row>
+        </abp-container>
     </div>
     <div class="code-area">
-        <pre>
- &lt;abp-row&gt;
-    &lt;abp-column&gt; .col-md-4&lt;/abp-column&gt;
-    &lt;abp-column size-md=&quot;C4&quot; offset-md=&quot;C4&quot;&gt;.col-md-4 .offset-md-4&lt;/abp-column&gt;
- &lt;/abp-row&gt;
- &lt;abp-row&gt;
-    &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
-    &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
- &lt;/abp-row&gt;
- &lt;abp-row&gt;
-    &lt;abp-column size-md=&quot;C6&quot; offset-md=&quot;C3&quot;&gt;.col-md-6 .offset-md-3&lt;/abp-column&gt;
- &lt;/abp-row&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+        &lt;abp-container&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size-sm=&quot;_5&quot; size-md=&quot;_6&quot;&gt;.col-sm-5 .col-md-6&lt;/abp-column&gt;
+                &lt;abp-column size-sm=&quot;_5&quot; offset-sm=&quot;_2&quot; size-md=&quot;_6&quot; offset-md=&quot;_&quot;&gt;.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+            &lt;abp-row&gt;
+                &lt;abp-column size-sm=&quot;_6&quot; size-md=&quot;_5&quot; size-lg=&quot;_6&quot;&gt;col-sm-6 .col-md-5 .col-lg-6&lt;/abp-column&gt;
+                &lt;abp-column size-sm=&quot;_6&quot; size-md=&quot;_5&quot; offset-md=&quot;_2&quot; size-lg=&quot;_6&quot; offset-lg=&quot;_&quot;&gt;.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0&lt;/abp-column&gt;
+            &lt;/abp-row&gt;
+        &lt;/abp-container&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+        &lt;div class=&quot;container&quot;&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-sm-5 col-md-6&quot;&gt;.col-sm-5 .col-md-6&lt;/div&gt;
+                &lt;div class=&quot;col col-sm-5 col-md-6 offset-sm-2 offset-md-0&quot;&gt;col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;row&quot;&gt;
+                &lt;div class=&quot;col col-sm-6 col-md-5 col-lg-6&quot;&gt;col-sm-6 .col-md-5 .col-lg-6&lt;/div&gt;
+                &lt;div class=&quot;col col-sm-6 col-md-5 col-lg-6 offset-md-2 offset-lg-0&quot;&gt;.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>