diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePosition.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePosition.cs
new file mode 100644
index 0000000000..b3396a513b
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePosition.cs
@@ -0,0 +1,9 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public enum AbpCardImagePosition
+    {
+        None,
+        Top,
+        Bottom
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePositionExtensions.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePositionExtensions.cs
new file mode 100644
index 0000000000..7a3f74449c
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImagePositionExtensions.cs
@@ -0,0 +1,20 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public static class AbpCardImagePositionExtensions
+    {
+        public static string ToClassName(this AbpCardImagePosition position)
+        {
+            switch (position)
+            {
+                case AbpCardImagePosition.None:
+                    return "card-img";
+                case AbpCardImagePosition.Top:
+                    return "card-img-top";
+                case AbpCardImagePosition.Bottom:
+                    return "card-img-bottom";
+                default:
+                    throw new AbpException("Unknown AbpCardImagePosition: " + position);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelper.cs
new file mode 100644
index 0000000000..6bafed3376
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelper.cs
@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    [HtmlTargetElement("img", Attributes = "abp-card-image", TagStructure = TagStructure.WithoutEndTag)]
+    public class AbpCardImageTagHelper : AbpTagHelper<AbpCardImageTagHelper, AbpCardImageTagHelperService>
+    {
+        [HtmlAttributeName("abp-card-image")]
+        public AbpCardImagePosition Position { get; set; } = AbpCardImagePosition.Top;
+
+        public AbpCardImageTagHelper(AbpCardImageTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelperService.cs
new file mode 100644
index 0000000000..65cb8ff2bc
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelperService.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public class AbpCardImageTagHelperService : AbpTagHelperService<AbpCardImageTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.AddClass(TagHelper.Position.ToClassName());
+            output.Attributes.RemoveAll("abp-card-image");
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardLinkTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardLinkTagHelper.cs
index 5b591d007d..8f7f29bbb5 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardLinkTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardLinkTagHelper.cs
@@ -2,13 +2,13 @@
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
 {
-    [HtmlTargetElement(Attributes = "abp-card-link")]
+    [HtmlTargetElement("a", Attributes = "abp-card-link")]
     public class AbpCardLinkTagHelper : AbpTagHelper<AbpCardLinkTagHelper, AbpCardLinkTagHelperService>
     {
         public AbpCardLinkTagHelper(AbpCardLinkTagHelperService tagHelperService)
             : base(tagHelperService)
         {
-            
+         
         }
     }
 }
\ No newline at end of file
diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
index f4832ff618..90267b7996 100644
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
@@ -42,7 +42,7 @@
         <abp-card style="width: 18rem;">
             <abp-card-body title="Card title" subtitle="Card subtitle">
                 <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>
-                <a abp-card-link href="#">Card link</a>
+                <a abp-card-link>Card link</a>
                 <a abp-card-link href="#">Another link</a>
             </abp-card-body>
         </abp-card>
@@ -50,9 +50,7 @@
     <div class="code-area">
         <pre>
 &lt;abp-card style="width: 18rem;"&gt;
-    &lt;abp-card-body&gt;
-        &lt;abp-card-title&gt;Card title&lt;/abp-card-title&gt;
-        &lt;abp-card-subtitle class="mb-2 text-muted"&gt;Card subtitle&lt;/abp-card-subtitle&gt;
+    &lt;abp-card-body title="Card title" subtitle="Card subtitle"&gt;
         &lt;abp-card-text&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/abp-card-text&gt;
         &lt;a abp-card-link href="#"&gt;Card link&lt;/a&gt;
         &lt;a abp-card-link href="#"&gt;Another link&lt;/a&gt;
@@ -67,7 +65,7 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-card style="width: 18rem;">
-            <img class="card-img-top" src="~/imgs/demo/300x200.png" alt="Card image cap">
+            <img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card 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>
@@ -78,7 +76,7 @@
     <div class="code-area">
         <pre>
 &lt;abp-card style="width: 18rem;"&gt;
-    &lt;img class="card-img-top" src="~/imgs/demo/300x200.png" alt="Card image cap"&gt;
+    &lt;img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap"&gt;
     &lt;abp-card-body&gt;
         &lt;abp-card-title&gt;Card title&lt;/abp-card-title&gt;
         &lt;abp-card-text&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/abp-card-text&gt;