From 85ac8a04a07f31434737ef8b071bd07019437fbc Mon Sep 17 00:00:00 2001
From: Galip Tolga Erdem <galiperdem@gmail.com>
Date: Thu, 19 Mar 2020 17:18:22 +0300
Subject: [PATCH] added alerts documentation

---
 docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md | 82 +++++++++++++++++++++
 docs/en/UI/AspNetCore/Tag-Helpers/Index.md  |  2 +
 2 files changed, 84 insertions(+)
 create mode 100644 docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md

diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md b/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md
new file mode 100644
index 0000000000..cf19e31e29
--- /dev/null
+++ b/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md
@@ -0,0 +1,82 @@
+# Alerts
+
+## Introduction
+
+`abp-alert` is a main element to create an alert.
+
+Basic usage:
+
+````xml
+<abp-alert alert-type="Primary">
+    A simple primary alert—check it out!
+</abp-alert>
+````
+
+
+
+## Demo
+
+See the [alerts demo page](https://bootstrap-taghelpers.abp.io/Components/Alerts) to see it in action.
+
+## Attributes
+
+### alert-type
+
+A value indicates the type of the alert. Should be one of the following values:
+
+* `Default` (default value)
+* `Primary`
+* `Secondary`
+* `Success`
+* `Danger`
+* `Warning`
+* `Info`
+* `Light`
+* `Dark`
+
+Example:
+
+````xml
+<abp-alert alert-type="Warning">
+    A simple warning  alert—check it out!
+</abp-alert>
+````
+
+### alert-link
+
+A value provides matching colored links within any alert. 
+
+Example:
+
+````xml
+<abp-alert alert-type="Danger">
+    A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+</abp-alert>
+````
+
+### dismissible
+
+A value to make the alert dismissible.
+
+Example:
+
+````xml
+<abp-alert alert-type="Warning" dismissible="true">
+    Holy guacamole! You should check in on some of those fields below.
+</abp-alert>
+````
+
+### Additional content
+
+`abp-alert` can also contain additional HTML elements like headings, paragraphs and dividers.
+
+Example:
+
+````xml
+<abp-alert alert-type="Success">
+    <h4>Well done!</h4>
+    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+    <hr>
+    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</abp-alert>
+````
diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md b/docs/en/UI/AspNetCore/Tag-Helpers/Index.md
index d7e393933e..5f36395c00 100644
--- a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md
+++ b/docs/en/UI/AspNetCore/Tag-Helpers/Index.md
@@ -13,6 +13,8 @@ ABP Framework also adds some **useful features** to the standard bootstrap compo
 Here, the list of components those are wrapped by the ABP Framework:
 
 * [Buttons](Buttons.md)
+* [Cards](Cards.md)
+* [Alerts](Alerts.md)
 * ...
 
 > Until all the tag helpers are documented, you can visit https://bootstrap-taghelpers.abp.io/ to see them with live samples.