@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.BordersModel
@{
    ViewData["Title"] = "Borders";
}

<h2>Borders</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/border/" target="_blank"> Bootstrap Border</a>.</p>

<h4># Borders Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <span abp-border="Default">aaa</span>
        <span abp-border="Top">bbb</span>
        <span abp-border="Right">ccc</span>
        <span abp-border="Left">ddd</span>
        <span abp-border="Bottom">eee</span>
        <span abp-border="Top_0">fff</span>
        <span abp-border="Right_0">ggg</span>
        <span abp-border="Left_0">hhh</span>
        <span abp-border="Bottom_0">iii</span>
        <span abp-border="Top_Primary">jjj</span>
        <span abp-border="Warning_0">kkk</span>
        <span abp-border="Bottom_Primary_0">lll</span>
        <span abp-border="Left_Danger">mmm</span>

    </div>
    <div class="code-area">
        <pre>
&lt;span abp-border&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_Primary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Warning_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_Primary_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_Danger&quot;&gt;&lt;/span&gt;
</pre>
    </div>
</div>