Merge pull request #670 from abpframework/Tag-Helper-Demo

Abp Tag Helpers: Demo improvements, Refactor, New Features

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpTagHelperService.cs

@@ -66,6 +66,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
 
             var innerContext = new TagHelperContext(attributeList, context.Items, Guid.NewGuid().ToString());
 
+            tagHelper.Init(context);
+
             if (runAsync)
             {
                 AsyncHelper.RunSync(() => tagHelper.ProcessAsync(innerContext, innerOutput));

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSize.cs

@@ -5,6 +5,10 @@
         Default,
         Small,
         Medium,
-        Large
+        Large,
+        Block,
+        Block_Small,
+        Block_Medium,
+        Block_Large,
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSizeExtensions.cs

@@ -12,6 +12,14 @@
                     return "btn-md";
                 case AbpButtonSize.Large:
                     return "btn-lg";
+                case AbpButtonSize.Block:
+                    return "btn-block";
+                case AbpButtonSize.Block_Small:
+                    return "btn-sm  btn-block";
+                case AbpButtonSize.Block_Medium:
+                    return "btn-md  btn-block";
+                case AbpButtonSize.Block_Large:
+                    return "btn-lg  btn-block";
                 case AbpButtonSize.Default:
                     return "";
                 default:

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelper.cs

@@ -9,14 +9,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
 
         public AbpButtonSize Size { get; set; } = AbpButtonSize.Default;
 
-        public bool? Block { get; set; } = false;
-
         public string BusyText { get; set; }
 
         public string Text { get; set; }
 
         public string Icon { get; set; }
 
+        public bool? Disabled { get; set; }
+
         public FontIconType IconType { get; set; } = FontIconType.FontAwesome;
 
         public AbpButtonTagHelper(AbpButtonTagHelperService service) 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelperServiceBase.cs

@@ -13,6 +13,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
             AddClasses(context, output);
             AddIcon(context, output);
             AddText(context, output);
+            AddDisabled(context, output);
         }
 
         protected virtual void NormalizeTagMode(TagHelperContext context, TagHelperOutput output)
@@ -33,11 +34,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
             {
                 output.Attributes.AddClass(TagHelper.Size.ToClassName());
             }
-
-            if (TagHelper.Block ?? false)
-            {
-                output.Attributes.AddClass("btn-block");
-            }
         }
 
         protected virtual void AddIcon(TagHelperContext context, TagHelperOutput output)
@@ -70,5 +66,13 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
 
             output.Content.AppendHtml($"<span>{TagHelper.Text}</span>");
         }
+
+        protected virtual void AddDisabled(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Disabled ?? false)
+            {
+                output.Attributes.Add("disabled", "disabled");
+            }
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonToolbarTagHelper.cs

@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
+{
+    public class AbpButtonToolbarTagHelper : AbpTagHelper<AbpButtonToolbarTagHelper, AbpButtonToolbarTagHelperService>
+    {
+        public AbpButtonToolbarTagHelper(AbpButtonToolbarTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonToolbarTagHelperService.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.Button
+{
+    public class AbpButtonToolbarTagHelperService : AbpTagHelperService<AbpButtonToolbarTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.AddClass("btn-toolbar");
+            output.Attributes.Add("role","toolbar");
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpLinkButtonTagHelper.cs

@@ -11,12 +11,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
 
         public AbpButtonSize Size { get; set; } = AbpButtonSize.Default;
 
-        public bool? Block { get; set; } = false;
-
         public string Text { get; set; }
 
         public string Icon { get; set; }
 
+        public bool? Disabled { get; set; }
+
         public FontIconType IconType { get; } = FontIconType.FontAwesome;
 
         public AbpLinkButtonTagHelper(AbpLinkButtonTagHelperService service) 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/IButtonTagHelperBase.cs

@@ -6,12 +6,12 @@
 
         AbpButtonSize Size { get; }
 
-        bool? Block { get;}
-
         string Text { get; }
 
         string Icon { get; }
 
+        bool? Disabled { get; }
+
         FontIconType IconType { get; }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBackgroundTagHelper.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    [HtmlTargetElement("abp-card", Attributes = "background")]
+    [HtmlTargetElement("abp-card-header", Attributes = "background")]
+    [HtmlTargetElement("abp-card-body", Attributes = "background")]
+    [HtmlTargetElement("abp-card-footer", Attributes = "background")]
+    public class AbpCardBackgroundTagHelper : AbpTagHelper<AbpCardBackgroundTagHelper, AbpCardBackgroundTagHelperService>
+    {
+        public AbpCardBackgroundType Background { get; set; } = AbpCardBackgroundType.Default;
+
+        public AbpCardBackgroundTagHelper(AbpCardBackgroundTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBackgroundTagHelperService.cs

@@ -0,0 +1,23 @@
+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 AbpCardBackgroundTagHelperService : AbpTagHelperService<AbpCardBackgroundTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            SetBackground(context, output);
+        }
+
+        protected virtual void SetBackground(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Background == AbpCardBackgroundType.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("bg-" + TagHelper.Background.ToString().ToLowerInvariant());
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBackgroundType.cs

@@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public enum AbpCardBackgroundType
+    {
+        Default,
+        Primary,
+        Secondary,
+        Success,
+        Danger,
+        Warning,
+        Info,
+        Light,
+        Dark,
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBorderColorType.cs

@@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public enum AbpCardBorderColorType
+    {
+        Default,
+        Primary,
+        Secondary,
+        Success,
+        Danger,
+        Warning,
+        Info,
+        Light,
+        Dark,
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardFooterTagHelper.cs

@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public class AbpCardFooterTagHelper : AbpTagHelper<AbpCardFooterTagHelper, AbpCardFooterTagHelperService>
+    {
+        public AbpCardFooterTagHelper(AbpCardFooterTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardFooterTagHelperService.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 AbpCardFooterTagHelperService : AbpTagHelperService<AbpCardFooterTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.AddClass("card-footer");
+            output.TagName = "div";
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardImageTagHelper.cs

@@ -3,6 +3,7 @@
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
 {
     [HtmlTargetElement("img", Attributes = "abp-card-image", TagStructure = TagStructure.WithoutEndTag)]
+    [HtmlTargetElement("abp-image", Attributes = "abp-card-image", TagStructure = TagStructure.WithoutEndTag)]
     public class AbpCardImageTagHelper : AbpTagHelper<AbpCardImageTagHelper, AbpCardImageTagHelperService>
     {
         [HtmlAttributeName("abp-card-image")]

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTagHelper.cs

@@ -2,6 +2,8 @@
 {
     public class AbpCardTagHelper : AbpTagHelper<AbpCardTagHelper, AbpCardTagHelperService>
     {
+        public AbpCardBorderColorType Border { get; set; } = AbpCardBorderColorType.Default;
+
         public AbpCardTagHelper(AbpCardTagHelperService tagHelperService) 
             : base(tagHelperService)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTagHelperService.cs

@@ -9,6 +9,17 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
         {
             output.TagName = "div";
             output.Attributes.AddClass("card");
+
+            SetBorder(context, output);
+        }
+        protected virtual void SetBorder(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Border == AbpCardBorderColorType.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("border-" + TagHelper.Border.ToString().ToLowerInvariant());
         }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTextColorTagHelper.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    [HtmlTargetElement("abp-card", Attributes = "text-color")]
+    [HtmlTargetElement("abp-card-header", Attributes = "text-color")]
+    [HtmlTargetElement("abp-card-body", Attributes = "text-color")]
+    [HtmlTargetElement("abp-card-footer", Attributes = "text-color")]
+    public class AbpCardTextColorTagHelper : AbpTagHelper<AbpCardTextColorTagHelper, AbpCardTextColorTagHelperService>
+    {
+        public AbpCardTextColorType TextColor { get; set; } = AbpCardTextColorType.Default;
+
+        public AbpCardTextColorTagHelper(AbpCardTextColorTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTextColorTagHelperService.cs

@@ -0,0 +1,23 @@
+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 AbpCardTextColorTagHelperService : AbpTagHelperService<AbpCardTextColorTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            SetTextColor(context, output);
+        }
+
+        protected virtual void SetTextColor(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.TextColor == AbpCardTextColorType.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("text-" + TagHelper.TextColor.ToString().ToLowerInvariant());
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTextColorType.cs

@@ -0,0 +1,16 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public enum AbpCardTextColorType
+    {
+        Default,
+        White,
+        Primary,
+        Secondary,
+        Success,
+        Danger,
+        Warning,
+        Info,
+        Light,
+        Dark
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelper.cs

@@ -4,6 +4,8 @@
     {
         public string Id { get; set; }
 
+        public bool? Multi { get; set; }
+
         public bool? Show { get; set; }
 
         public AbpCollapseBodyTagHelper(AbpCollapseBodyTagHelperService tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelperService.cs

@@ -17,16 +17,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
                 output.Attributes.AddClass("show");
             }
 
-            var innerContent = (await output.GetChildContentAsync()).GetContent();
+            if (TagHelper.Multi ?? false)
-
+            {
-            var body = GetBody(context, output, innerContent);
+                output.Attributes.AddClass("multi-collapse");
+            }
 
-            output.Content.SetHtmlContent(body);
+            var innerContent = (await output.GetChildContentAsync()).GetContent();
-        }
 
-        protected virtual string GetBody(TagHelperContext context, TagHelperOutput output, string innerContent)
+            output.Content.SetHtmlContent(innerContent);
-        {
-            return "<div class=\"card card-body\">" + innerContent + "</div>";
         }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs

@@ -1,11 +1,14 @@
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
 {
+
+    [HtmlTargetElement("abp-button", Attributes = "abp-collapse-id")]
+    [HtmlTargetElement("a", Attributes = "abp-collapse-id")]
     public class AbpCollapseButtonTagHelper : AbpTagHelper<AbpCollapseButtonTagHelper, AbpCollapseButtonTagHelperService>
     {
-        public AbpButtonType ButonType { get; set; } = AbpButtonType.Default;
+        [HtmlAttributeName("abp-collapse-id")]
-
         public string BodyId { get; set; }
 
         public AbpCollapseButtonTagHelper(AbpCollapseButtonTagHelperService tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelperService.cs

@@ -8,20 +8,48 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
-            output.TagName = "button";
+            
-            output.Attributes.AddClass("btn");
+
-            output.Attributes.Add("data-toggle","collapse");
+            AddCommonAttributes(context, output);
-            output.Attributes.Add("aria-expanded","false");
+
-            output.Attributes.Add("type","button");
+            if (output.TagName == "abp-button" || output.TagName == "button")
-            output.Attributes.Add("data-target", "#" +TagHelper.BodyId);
+            {
+                AddButtonAttributes(context,output);
+            }
+            else if (output.TagName == "a")
+            {
+                AddLinkAttributes(context, output);
+            }
+        }
+
+        protected virtual void AddCommonAttributes(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.Add("data-toggle", "collapse");
+            output.Attributes.Add("aria-expanded", "false");
             output.Attributes.Add("aria-controls", TagHelper.BodyId);
+        }
 
+        protected virtual void AddButtonAttributes(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.BodyId.Trim().Split(' ').Length > 1)
+            {
+                output.Attributes.Add("data-target", ".multi-collapse");
+                return;
+            }
 
-            if (TagHelper.ButonType != AbpButtonType.Default)
+            output.Attributes.Add("data-target", "#" + TagHelper.BodyId);
+        }
+
+        protected virtual void AddLinkAttributes(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.BodyId.Trim().Split(' ').Length > 1)
             {
-                output.Attributes.AddClass("btn-" + TagHelper.ButonType.ToString().ToLowerInvariant());
+                output.Attributes.Add("href", ".multi-collapse");
+                return;
             }
+
+            output.Attributes.Add("href", "#" + TagHelper.BodyId);
         }
-        
+
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Dropdown/AbpDropdownButtonTagHelperService.cs

@@ -125,6 +125,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Dropdown
             buttonTag.TagName = "a";
             buttonTag.Attributes.RemoveAll("type");
             buttonTag.Attributes.Add("roles", "button");
+            buttonTag.Attributes.Add("href", "#");
 
             if (TagHelper.NavLink??false)
             {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Dropdown/AbpDropdownItemTextTagHelper.cs

@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Dropdown
+{
+    public class AbpDropdownItemTextTagHelper : AbpTagHelper<AbpDropdownItemTextTagHelper, AbpDropdownItemTextTagHelperService>
+    {
+        public AbpDropdownItemTextTagHelper(AbpDropdownItemTextTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Dropdown/AbpDropdownItemTextTagHelperService.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.Dropdown
+{
+    public class AbpDropdownItemTextTagHelperService : AbpTagHelperService<AbpDropdownItemTextTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.AddClass("dropdown-item-text");
+            output.TagName = "span";
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpFormControlSize.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
+{
+    public enum AbpFormControlSize
+    {
+        Default,
+        Small,
+        Medium,
+        Large
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelper.cs

@@ -14,10 +14,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
         public bool IsDisabled { get; set; } = false;
 
         [HtmlAttributeName("readonly")]
-        public bool IsReadonly { get; set; } = false;
+        public AbpReadonlyInputType IsReadonly { get; set; } = AbpReadonlyInputType.False;
 
         public bool AutoFocus { get; set; }
 
+        public AbpFormControlSize Size { get; set; } = AbpFormControlSize.Default;
+
         [HtmlAttributeNotBound]
         [ViewContext]
         public ViewContext ViewContext { get; set; }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelperService.cs

@@ -1,9 +1,13 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using System.Text.Encodings.Web;
 using Microsoft.AspNetCore.Mvc.TagHelpers;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@@ -12,11 +16,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
     {
         private readonly IHtmlGenerator _generator;
         private readonly HtmlEncoder _encoder;
+        private readonly IStringLocalizerFactory _stringLocalizerFactory;
+        private readonly AbpMvcDataAnnotationsLocalizationOptions _options;
 
-        public AbpInputTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder)
+        public AbpInputTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder, IOptions<AbpMvcDataAnnotationsLocalizationOptions> options, IStringLocalizerFactory stringLocalizerFactory)
         {
             _generator = generator;
             _encoder = encoder;
+            _stringLocalizerFactory = stringLocalizerFactory;
+            _options = options.Value;
         }
 
         public override void Process(TagHelperContext context, TagHelperOutput output)
@@ -52,10 +60,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             var inputTag = GetInputTagHelperOutput(context, output, out isCheckbox);
             var inputHtml = RenderTagHelperOutput(inputTag, _encoder);
             var label = GetLabelAsHtml(context, output, inputTag, isCheckbox);
+            var info = GetInfoAsHtml(context, output, inputTag, isCheckbox);
 
             var validation = isCheckbox ? "" : GetValidationAsHtml(context, output, inputTag);
 
-            return GetContent(context, output, label, inputHtml, validation, isCheckbox);
+            return GetContent(context, output, label, inputHtml, validation, info, isCheckbox);
         }
 
         protected virtual string GetValidationAsHtml(TagHelperContext context, TagHelperOutput output, TagHelperOutput inputTag)
@@ -76,14 +85,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             return RenderTagHelper(attributeList, context, validationMessageTagHelper, _encoder, "span", TagMode.StartTagAndEndTag, true);
         }
 
-        protected virtual string GetContent(TagHelperContext context, TagHelperOutput output, string label, string inputHtml, string validation, bool isCheckbox)
+        protected virtual string GetContent(TagHelperContext context, TagHelperOutput output, string label, string inputHtml, string validation, string infoHtml, bool isCheckbox)
         {
             var innerContent = isCheckbox ?
                 inputHtml + Environment.NewLine + label :
                 label + Environment.NewLine + inputHtml;
 
             return Environment.NewLine + innerContent + Environment.NewLine +
-                Environment.NewLine + validation + Environment.NewLine;
+                Environment.NewLine + validation + Environment.NewLine + infoHtml;
         }
 
         protected virtual string SurroundInnerHtmlAndGet(TagHelperContext context, TagHelperOutput output, string innerHtml, bool isCheckbox)
@@ -121,14 +130,33 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
             ConvertToTextAreaIfTextArea(inputTagHelperOutput);
             AddDisabledAttribute(inputTagHelperOutput);
-            AddReadOnlyAttribute(inputTagHelperOutput);
             AddAutoFocusAttribute(inputTagHelperOutput);
             isCheckbox = IsInputCheckbox(context, output, inputTagHelperOutput.Attributes);
-            inputTagHelperOutput.Attributes.AddClass(isCheckbox ? "form-check-input" : "form-control");
+            AddFormControlClass(context, output, isCheckbox, inputTagHelperOutput);
+            AddReadOnlyAttribute(inputTagHelperOutput);
+            AddPlaceholderAttribute(inputTagHelperOutput);
+            AddInfoTextId(inputTagHelperOutput);
 
             return inputTagHelperOutput;
         }
 
+        private void AddFormControlClass(TagHelperContext context, TagHelperOutput output, bool isCheckbox, TagHelperOutput inputTagHelperOutput)
+        {
+            var className = "form-control";
+            var readonlyAttribute = GetAttribute<ReadOnlyInput>(TagHelper.AspFor.ModelExplorer);
+
+            if (isCheckbox)
+            {
+                className = "form-check-input";
+            }
+            else if (TagHelper.IsReadonly == AbpReadonlyInputType.True_PlainText || (readonlyAttribute != null && readonlyAttribute.PlainText))
+            {
+                className = "form-control-plaintext";
+            }
+
+            inputTagHelperOutput.Attributes.AddClass(className + " " + GetSize(context, output));
+        }
+
         protected virtual void AddAutoFocusAttribute(TagHelperOutput inputTagHelperOutput)
         {
             if (TagHelper.AutoFocus && !inputTagHelperOutput.Attributes.ContainsName("data-auto-focus"))
@@ -139,26 +167,65 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         protected virtual void AddDisabledAttribute(TagHelperOutput inputTagHelperOutput)
         {
-            if (inputTagHelperOutput.Attributes.ContainsName("disabled"))
+            if (inputTagHelperOutput.Attributes.ContainsName("disabled") == false && 
+                     (TagHelper.IsDisabled || GetAttribute<DisabledInput>(TagHelper.AspFor.ModelExplorer) != null))
+            {
+                inputTagHelperOutput.Attributes.Add("disabled", "");
+            }
+        }
+
+        protected virtual void AddReadOnlyAttribute(TagHelperOutput inputTagHelperOutput)
+        {
+            if (inputTagHelperOutput.Attributes.ContainsName("readonly") == false && 
+                    (TagHelper.IsReadonly != AbpReadonlyInputType.False || GetAttribute<ReadOnlyInput>(TagHelper.AspFor.ModelExplorer) != null))
+            {
+                inputTagHelperOutput.Attributes.Add("readonly", "");
+            }
+        }
+
+        protected virtual void AddPlaceholderAttribute(TagHelperOutput inputTagHelperOutput)
+        {
+            if (inputTagHelperOutput.Attributes.ContainsName("placeholder"))
             {
                 return;
             }
-            else if (TagHelper.IsDisabled || GetAttribute<DisabledInput>(TagHelper.AspFor.ModelExplorer) != null)
+
+            var attribute = GetAttribute<Placeholder>(TagHelper.AspFor.ModelExplorer);
+
+            if (attribute != null)
             {
-                inputTagHelperOutput.Attributes.Add("disabled", "");
+                inputTagHelperOutput.Attributes.Add("placeholder", LocalizeText(attribute.Value));
             }
         }
 
-        protected virtual void AddReadOnlyAttribute(TagHelperOutput inputTagHelperOutput)
+        protected virtual void AddInfoTextId(TagHelperOutput inputTagHelperOutput)
         {
-            if (inputTagHelperOutput.Attributes.ContainsName("readonly"))
+            if (GetAttribute<InputInfoText>(TagHelper.AspFor.ModelExplorer) == null)
             {
                 return;
             }
-            else if (TagHelper.IsReadonly || GetAttribute<ReadOnlyInput>(TagHelper.AspFor.ModelExplorer) != null)
+
+            var idAttr = inputTagHelperOutput.Attributes.FirstOrDefault(a => a.Name == "id");
+
+            if (idAttr == null)
             {
-                inputTagHelperOutput.Attributes.Add("readonly", "");
+                return;
             }
+
+            inputTagHelperOutput.Attributes.Add("aria-describedby", LocalizeText(idAttr.Value + "InfoText"));
+        }
+
+        protected virtual string LocalizeText(string text)
+        {
+            IStringLocalizer localizer = null;
+            var resourceType = _options.AssemblyResources.GetOrDefault(TagHelper.AspFor.ModelExplorer.ModelType.Assembly);
+
+            if (resourceType != null)
+            {
+               localizer = _stringLocalizerFactory.Create(resourceType);
+            }
+
+            return localizer == null? text: localizer[text].Value;
         }
 
         protected virtual bool IsInputCheckbox(TagHelperContext context, TagHelperOutput output, TagHelperAttributeList attributes)
@@ -185,6 +252,33 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
                    "</label>";
         }
 
+        protected virtual string GetInfoAsHtml(TagHelperContext context, TagHelperOutput output, TagHelperOutput inputTag, bool isCheckbox)
+        {
+            if (isCheckbox)
+            {
+                return "";
+            }
+
+            var infoAttribute = GetAttribute<InputInfoText>(TagHelper.AspFor.ModelExplorer);
+            if (infoAttribute == null)
+            {
+                return "";
+            }
+
+            var idAttr = inputTag.Attributes.FirstOrDefault(a => a.Name == "id");
+
+            if (idAttr == null)
+            {
+                return "";
+            }
+
+            var id = idAttr.Value + "InfoText";
+
+            return "<small id=\""+ id + "\" class=\"form-text text-muted\">" +
+                   LocalizeText(infoAttribute.Text) +
+                   "</small>";
+        }
+
         protected virtual string GetLabelAsHtmlUsingTagHelper(TagHelperContext context, TagHelperOutput output, bool isCheckbox)
         {
             var labelTagHelper = new LabelTagHelper(_generator)
@@ -254,5 +348,27 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
                 output.Attributes.Add(newAttritube);
             }
         }
+
+        protected virtual string GetSize(TagHelperContext context, TagHelperOutput output)
+        {
+            var attribute = GetAttribute<FormControlSize>(TagHelper.AspFor.ModelExplorer);
+
+            if (attribute != null)
+            {
+                TagHelper.Size = attribute.Size;
+            }
+
+            switch (TagHelper.Size)
+            {
+                case AbpFormControlSize.Small:
+                    return "form-control-sm";
+                case AbpFormControlSize.Medium:
+                    return "form-control-md";
+                case AbpFormControlSize.Large:
+                    return "form-control-lg";
+            }
+
+            return "";
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpRadioInputTagHelperService.cs

@@ -6,11 +6,23 @@ using System.Text;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Volo.Abp.AspNetCore.Mvc.Localization;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 {
     public class AbpRadioInputTagHelperService : AbpTagHelperService<AbpRadioInputTagHelper>
     {
+        private readonly AbpMvcDataAnnotationsLocalizationOptions _options;
+        private readonly IStringLocalizerFactory _stringLocalizerFactory;
+
+        public AbpRadioInputTagHelperService(IOptions<AbpMvcDataAnnotationsLocalizationOptions> options, IStringLocalizerFactory stringLocalizerFactory)
+        {
+            _options = options.Value;
+            _stringLocalizerFactory = stringLocalizerFactory;
+        }
+
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
             var selectItems = GetSelectItems(context,output);
@@ -76,12 +88,32 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         protected virtual bool GetSelectItemsIfProvidedByEnum(TagHelperContext context, TagHelperOutput output, ModelExplorer explorer, out List<SelectListItem> selectItems)
         {
+            IStringLocalizer localizer = null;
+            var resourceType = _options.AssemblyResources.GetOrDefault(explorer.ModelType.Assembly);
+
+            if (resourceType != null)
+            {
+                localizer = _stringLocalizerFactory.Create(resourceType);
+            }
+
             selectItems = explorer.Metadata.IsEnum ? explorer.ModelType.GetTypeInfo().GetMembers(BindingFlags.Public | BindingFlags.Static)
-                .Select((t, i) => new SelectListItem { Value = i.ToString(), Text = t.Name }).ToList() : null;
+                .Select((t, i) => new SelectListItem { Value = i.ToString(), Text = GetLocalizedPropertyName(localizer, explorer.ModelType, t.Name) }).ToList() : null;
 
             return selectItems != null;
         }
 
+        protected virtual string GetLocalizedPropertyName(IStringLocalizer localizer, Type enumType, string propertyName)
+        {
+            if (localizer == null)
+            {
+                return propertyName;
+            }
+
+            var localizedString = localizer[enumType.Name + "." + propertyName];
+
+            return !localizedString.ResourceNotFound ? localizedString.Value : localizer[propertyName].Value;
+        }
+
         protected virtual bool GetSelectItemsIfProvidedFromAttribute(TagHelperContext context, TagHelperOutput output, ModelExplorer explorer, out List<SelectListItem> selectItems)
         {
             selectItems = GetAttribute<SelectItems>(explorer)?.GetItems(explorer)?.ToList();

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpReadonlyInputType.cs

@@ -0,0 +1,9 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
+{
+    public enum AbpReadonlyInputType
+    {
+        False,
+        True,
+        True_PlainText
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs

@@ -13,6 +13,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         public IEnumerable<SelectListItem> AspItems { get; set; }
 
+        public AbpFormControlSize Size { get; set; } = AbpFormControlSize.Default;
+
         [HtmlAttributeNotBound]
         [ViewContext]
         public ViewContext ViewContext { get; set; }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Reflection;
@@ -7,6 +8,9 @@ using Microsoft.AspNetCore.Mvc.Rendering;
 using Microsoft.AspNetCore.Mvc.TagHelpers;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@@ -15,11 +19,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
     {
         private readonly IHtmlGenerator _generator;
         private readonly HtmlEncoder _encoder;
+        private readonly IStringLocalizerFactory _stringLocalizerFactory;
+        private readonly AbpMvcDataAnnotationsLocalizationOptions _options;
 
-        public AbpSelectTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder)
+        public AbpSelectTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder, IOptions<AbpMvcDataAnnotationsLocalizationOptions> options, IStringLocalizerFactory stringLocalizerFactory)
         {
             _generator = generator;
             _encoder = encoder;
+            _stringLocalizerFactory = stringLocalizerFactory;
+            _options = options.Value;
         }
 
         public override void Process(TagHelperContext context, TagHelperOutput output)
@@ -37,6 +45,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             else
             {
                 output.TagName = "div";
+                LeaveOnlyGroupAttributes(context, output);
                 output.Attributes.AddClass("form-group");
                 output.TagMode = TagMode.StartTagAndEndTag;
                 output.Content.SetHtmlContent(innerHtml);
@@ -59,18 +68,17 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         protected virtual TagHelperOutput GetSelectTag(TagHelperContext context, TagHelperOutput output)
         {
-            var selectItems = GetSelectItems(context, output);
-
             var selectTagHelper = new SelectTagHelper(_generator)
             {
                 For = TagHelper.AspFor,
-                Items = selectItems,
+                Items = GetSelectItems(context, output),
                 ViewContext = TagHelper.ViewContext
             };
 
-            var inputTagHelperOutput = GetInnerTagHelper(new TagHelperAttributeList(), context, selectTagHelper, "select", TagMode.StartTagAndEndTag);
+            var inputTagHelperOutput = GetInnerTagHelper(GetInputAttributes(context, output), context, selectTagHelper, "select", TagMode.StartTagAndEndTag);
 
-            inputTagHelperOutput.Attributes.Add("class", "form-control");
+            inputTagHelperOutput.Attributes.AddClass("form-control");
+            inputTagHelperOutput.Attributes.AddClass(GetSize(context,output));
             AddDisabledAttribute(inputTagHelperOutput);
 
             return inputTagHelperOutput;
@@ -97,8 +105,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
                 throw new Exception("No items provided for select attribute.");
             }
 
-            SetSelectedValue(context, output, selectItems);
-
             return selectItems;
         }
 
@@ -114,12 +120,32 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         protected virtual bool GetSelectItemsIfProvidedByEnum(TagHelperContext context, TagHelperOutput output, ModelExplorer explorer, out List<SelectListItem> selectItems)
         {
+            IStringLocalizer localizer = null;
+            var resourceType = _options.AssemblyResources.GetOrDefault(explorer.ModelType.Assembly);
+
+            if (resourceType != null)
+            {
+                localizer = _stringLocalizerFactory.Create(resourceType);
+            }
+
             selectItems = explorer.Metadata.IsEnum ? explorer.ModelType.GetTypeInfo().GetMembers(BindingFlags.Public | BindingFlags.Static)
-                .Select((t, i) => new SelectListItem { Value = i.ToString(), Text = t.Name }).ToList() : null;
+                .Select((t, i) => new SelectListItem { Value = i.ToString(), Text = GetLocalizedPropertyName(localizer, explorer.ModelType, t.Name) }).ToList() : null;
 
             return selectItems != null;
         }
 
+        protected virtual string GetLocalizedPropertyName(IStringLocalizer localizer, Type enumType, string propertyName)
+        {
+            if (localizer == null)
+            {
+                return propertyName;
+            }
+
+            var localizedString = localizer[enumType.Name + "." + propertyName];
+
+            return !localizedString.ResourceNotFound ? localizedString.Value : localizer[propertyName].Value;
+        }
+
         protected virtual bool GetSelectItemsIfProvidedFromAttribute(TagHelperContext context, TagHelperOutput output, ModelExplorer explorer, out List<SelectListItem> selectItems)
         {
             selectItems = GetAttribute<SelectItems>(explorer)?.GetItems(explorer)?.ToList();
@@ -127,48 +153,67 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             return selectItems != null;
         }
 
-        protected virtual void SetSelectedValue(TagHelperContext context, TagHelperOutput output, List<SelectListItem> selectItems)
+        protected virtual string GetLabelAsHtmlUsingTagHelper(TagHelperContext context, TagHelperOutput output)
         {
-            if (!selectItems.Any(si => si.Selected))
+            var labelTagHelper = new LabelTagHelper(_generator)
             {
-                var selectedValue = GetSelectedValue(context, output);
+                For = TagHelper.AspFor,
-
+                ViewContext = TagHelper.ViewContext
-                var itemToBeSelected = selectItems.FirstOrDefault(si => si.Value.ToString() == selectedValue);
+            };
 
-                if (itemToBeSelected != null)
+            return RenderTagHelper(new TagHelperAttributeList(), context, labelTagHelper, _encoder, "label", TagMode.StartTagAndEndTag, true);
-                {
-                    itemToBeSelected.Selected = true;
-                }
-            }
         }
 
-        protected virtual string GetSelectedValue(TagHelperContext context, TagHelperOutput output)
+        protected virtual string GetSize(TagHelperContext context, TagHelperOutput output)
         {
-            var modelExplorer = TagHelper.AspFor.ModelExplorer;
+            var attribute = GetAttribute<FormControlSize>(TagHelper.AspFor.ModelExplorer);
 
-            if (modelExplorer.Metadata.IsEnum)
+            if (attribute != null)
             {
-                var baseType = modelExplorer.Model?.GetType().GetEnumUnderlyingType();
+                TagHelper.Size = attribute.Size;
-
-                if (baseType == null) { return null; }
-
-                return Convert.ChangeType(modelExplorer.Model, baseType)?.ToString() ?? "";
             }
-            else
+
+            switch (TagHelper.Size)
             {
-                return modelExplorer.Model?.ToString();
+                case AbpFormControlSize.Small:
+                    return "form-control-sm";
+                case AbpFormControlSize.Medium:
+                    return "form-control-md";
+                case AbpFormControlSize.Large:
+                    return "form-control-lg";
             }
+
+            return "";
         }
 
-        protected virtual string GetLabelAsHtmlUsingTagHelper(TagHelperContext context, TagHelperOutput output)
+        protected virtual TagHelperAttributeList GetInputAttributes(TagHelperContext context, TagHelperOutput output)
         {
-            var labelTagHelper = new LabelTagHelper(_generator)
+            var groupPrefix = "group-";
+
+            var tagHelperAttributes = output.Attributes.Where(a => !a.Name.StartsWith(groupPrefix)).ToList();
+            var attrList = new TagHelperAttributeList();
+
+            foreach (var tagHelperAttribute in tagHelperAttributes)
             {
-                For = TagHelper.AspFor,
+                attrList.Add(tagHelperAttribute);
-                ViewContext = TagHelper.ViewContext
+            }
-            };
 
-            return RenderTagHelper(new TagHelperAttributeList(), context, labelTagHelper, _encoder, "label", TagMode.StartTagAndEndTag, true);
+            return attrList;
+        }
+
+        protected virtual void LeaveOnlyGroupAttributes(TagHelperContext context, TagHelperOutput output)
+        {
+            var groupPrefix = "group-";
+            var tagHelperAttributes = output.Attributes.Where(a => a.Name.StartsWith(groupPrefix)).ToList();
+
+            output.Attributes.Clear();
+
+            foreach (var tagHelperAttribute in tagHelperAttributes)
+            {
+                var nameWithoutPrefix = tagHelperAttribute.Name.Substring(groupPrefix.Length);
+                var newAttritube = new TagHelperAttribute(nameWithoutPrefix, tagHelperAttribute.Value);
+                output.Attributes.Add(newAttritube);
+            }
         }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/FormControlSize.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
+{
+    [AttributeUsage(AttributeTargets.Property)]
+    public class FormControlSize : Attribute
+    {
+        public AbpFormControlSize Size { get; set; }
+
+        public FormControlSize(AbpFormControlSize size)
+        {
+            Size = size;
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/InputInfoText.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
+{
+    [AttributeUsage(AttributeTargets.Property)]
+    public class InputInfoText : Attribute
+    {
+        public string Text { get; set; }
+
+        public InputInfoText(string text)
+        {
+            Text = text;
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/Placeholder.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
+{
+    [AttributeUsage(AttributeTargets.Property)]
+    public class Placeholder : Attribute
+    {
+        public string Value { get; set; }
+
+        public Placeholder(string value)
+        {
+            Value = value;
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/ReadOnlyInput.cs

@@ -8,8 +8,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
     [AttributeUsage(AttributeTargets.Property)]
     public class ReadOnlyInput : Attribute
     {
+        public bool PlainText { get; set; }
+
         public ReadOnlyInput()
         {
         }
+
+        public ReadOnlyInput(bool plainText)
+        {
+            PlainText = plainText;
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs

@@ -1,11 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
-{
-    public class AbpColBreakTagHelper : AbpTagHelper<AbpColBreakTagHelper, AbpColBreakTagHelperService>
-    {
-        public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService)
-            : base(tagHelperService)
-        {
-
-        }
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnBreakerTagHelper.cs

@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpColumnBreakerTagHelper : AbpTagHelper<AbpColumnBreakerTagHelper, AbpColumnBreakerTagHelperService>
+    {
+        public AbpColumnBreakerTagHelper(AbpColumnBreakerTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnBreakerTagHelperService.cs

@@ -3,7 +3,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 {
-    public class AbpColBreakTagHelperService : AbpTagHelperService<AbpColBreakTagHelper>
+    public class AbpColumnBreakerTagHelperService : AbpTagHelperService<AbpColumnBreakerTagHelper>
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs

@@ -6,6 +6,8 @@
 
         public HorizontalAlign HAlign { get; set; } = HorizontalAlign.Default;
 
+        public bool? Gutters { get; set; } = true;
+
         public AbpRowTagHelper(AbpRowTagHelperService tagHelperService)
             : base(tagHelperService)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs

@@ -12,6 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
             ProcessVerticalAlign(output);
             ProcessHorizontalAlign(output);
+            ProcessGutters(output);
         }
 
         protected virtual void ProcessVerticalAlign(TagHelperOutput output)
@@ -33,5 +34,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
             output.Attributes.AddClass("justify-content-" + TagHelper.HAlign.ToString().ToLowerInvariant());
         }
+
+        protected virtual void ProcessGutters(TagHelperOutput output)
+        {
+            if (TagHelper.Gutters ?? true)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("no-gutters");
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImagePosition.cs

@@ -1,10 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
-{
-    public enum AbpImagePosition
-    {
-        Default,
-        Right,
-        Left,
-        Center
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImageTagHelper.cs

@@ -1,23 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
-{
-    public class AbpImageTagHelper : AbpTagHelper<AbpImageTagHelper, AbpImageTagHelperService>
-    {
-        public bool? Responsive { get; set; }
-
-        public bool? Thumbnail { get; set; }
-
-        public bool? Rounded { get; set; }
-
-        public AbpImagePosition Position { get; set; } = AbpImagePosition.Default;
-
-        public string Alt { get; set; }
-
-        public string Src { get; set; }
-
-        public AbpImageTagHelper(AbpImageTagHelperService tagHelperService)
-            : base(tagHelperService)
-        {
-
-        }
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImageTagHelperService.cs

@@ -1,68 +0,0 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
-{
-    public class AbpImageTagHelperService : AbpTagHelperService<AbpImageTagHelper>
-    {
-        public override void Process(TagHelperContext context, TagHelperOutput output)
-        {
-            output.TagName = "img";
-            SetSourceFile(context,output);
-            SetPosition(context,output);
-            SetResponsive(context,output);
-            SetThumbnail(context,output);
-            SetRounded(context,output);
-            SetAlt(context,output);
-        }
-        
-        protected virtual void SetSourceFile(TagHelperContext context, TagHelperOutput output) {
-            output.Attributes.Add("src",TagHelper.Src);
-        }
-        
-        protected virtual void SetPosition(TagHelperContext context, TagHelperOutput output)
-        {
-            if (TagHelper.Position == default)
-            {
-                return;
-            }
-            if (TagHelper.Position == AbpImagePosition.Left || TagHelper.Position == AbpImagePosition.Right)
-            {
-                output.Attributes.AddClass("float-" + TagHelper.Position.ToString().ToLowerInvariant());
-            }
-            if (TagHelper.Position == AbpImagePosition.Center)
-            {
-                output.PreElement.SetHtmlContent("<div class=\"text-center\">");
-                output.PostElement.SetHtmlContent("</div>");
-            }
-        }
-        
-        protected virtual void SetResponsive(TagHelperContext context, TagHelperOutput output) {
-            if (TagHelper.Responsive ?? false)
-            {
-                output.Attributes.AddClass("img-fluid");
-            }
-        }
-        
-        protected virtual void SetThumbnail(TagHelperContext context, TagHelperOutput output)
-        {
-            if (TagHelper.Thumbnail ?? false)
-            {
-                output.Attributes.AddClass("img-thumbnail");
-            }
-        }
-        
-        protected virtual void SetRounded(TagHelperContext context, TagHelperOutput output)
-        {
-            if (TagHelper.Rounded ?? false)
-            {
-                output.Attributes.AddClass("rounded");
-            }
-        }
-        
-        protected virtual void SetAlt(TagHelperContext context, TagHelperOutput output)
-        {
-            output.Attributes.Add("alt",TagHelper.Alt);
-        }
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs

@@ -4,6 +4,8 @@
     {
         public AbpModalSize Size { get; set; } = AbpModalSize.Default;
 
+        public bool? Centered { get; set; } = false;
+
         public AbpModalTagHelper(AbpModalTagHelperService tagHelperService)
             : base(tagHelperService)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs

@@ -36,6 +36,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
         {
             var classNames = new StringBuilder("modal-dialog");
 
+            if (TagHelper.Centered ?? false)
+            {
+                classNames.Append(" ");
+                classNames.Append("modal-dialog-centered");
+            }
+
             if (TagHelper.Size != AbpModalSize.Default)
             {
                 classNames.Append(" ");

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelper.cs

@@ -2,8 +2,6 @@
 {
     public class AbpNavItemTagHelper : AbpTagHelper<AbpNavItemTagHelper, AbpNavItemTagHelperService>
     {
-        public bool? Active { get; set; }
-
         public bool? Dropdown { get; set; }
 
         public AbpNavItemTagHelper(AbpNavItemTagHelperService tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelperService.cs

@@ -11,7 +11,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
             output.Attributes.AddClass("nav-item");
 
             SetDropdownClass(context, output);
-            SetActiveClass(context, output);
         }
 
         protected virtual void SetDropdownClass(TagHelperContext context, TagHelperOutput output)
@@ -21,13 +20,5 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
                 output.Attributes.AddClass("dropdown");
             }
         }
-
-        protected virtual void SetActiveClass(TagHelperContext context, TagHelperOutput output)
-        {
-            if (TagHelper.Active ?? false)
-            {
-                output.Attributes.AddClass("active");
-            }
-        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavLinkTagHelper.cs

@@ -8,8 +8,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
         public bool? Active { get; set; } 
 
         public bool? Disabled { get; set; }
-
-        public string Href { get; set; }
         
         public AbpNavLinkTagHelper(AbpNavLinkTagHelperService tagHelperService)
             : base(tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavLinkTagHelperService.cs

@@ -13,11 +13,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
             output.TagName = "a";
             output.TagMode = TagMode.StartTagAndEndTag;
             SetClasses(context, output);
-
-            if (!string.IsNullOrWhiteSpace(TagHelper.Href))
-            {
-                output.Attributes.Add("href", TagHelper.Href);
-            }
         }
 
         protected virtual void SetClasses(TagHelperContext context, TagHelperOutput output)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressBarTagHelper.cs

@@ -1,5 +1,9 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
 {
+    [HtmlTargetElement("abp-progress-bar")]
+    [HtmlTargetElement("abp-progress-part")]
     public class AbpProgressBarTagHelper : AbpTagHelper<AbpProgressBarTagHelper, AbpProgressBarTagHelperService>
     {
         public double Value { get; set; }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressBarTagHelperService.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+using System;
+using Microsoft.AspNetCore.Razor.TagHelpers;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
@@ -7,6 +8,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
+            SetParentElement(context, output);
+
             output.Attributes.AddClass("progress-bar");
             output.Attributes.Add("role","progressbar");
 
@@ -51,6 +54,17 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
             }
         }
 
+        protected virtual void SetParentElement(TagHelperContext context, TagHelperOutput output)
+        {
+            if (output.TagName == "abp-progress-part")
+            {
+                return;
+            }
+
+            output.PreElement.SetHtmlContent("<div class=\"progress\">" + Environment.NewLine);
+            output.PostElement.SetHtmlContent(Environment.NewLine + "</div>");
+        }
+
         protected virtual int CalculateStyleWidth()
         {
             return (int)((TagHelper.Value - TagHelper.MinValue) * (100 / (TagHelper.MaxValue - TagHelper.MinValue)));

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressGroupTagHelper.cs

@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
+{
+    public class AbpProgressGroupTagHelper : AbpTagHelper<AbpProgressGroupTagHelper, AbpProgressGroupTagHelperService>
+    {
+        public AbpProgressGroupTagHelper(AbpProgressGroupTagHelperService groupTagHelperService)
+            : base(groupTagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressTagHelperService.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressGroupTagHelperService.cs

@@ -3,7 +3,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
 {
-    public class AbpProgressTagHelperService : AbpTagHelperService<AbpProgressTagHelper>
+    public class AbpProgressGroupTagHelperService : AbpTagHelperService<AbpProgressGroupTagHelper>
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressTagHelper.cs

@@ -1,11 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
-{
-    public class AbpProgressTagHelper : AbpTagHelper<AbpProgressTagHelper, AbpProgressTagHelperService>
-    {
-        public AbpProgressTagHelper(AbpProgressTagHelperService tagHelperService)
-            : base(tagHelperService)
-        {
-
-        }
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Table/AbpTableStyleTagHelper.cs

@@ -6,9 +6,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Table
     [HtmlTargetElement("td")]
     public class AbpTableStyleTagHelper : AbpTagHelper<AbpTableStyleTagHelper, AbpTableStyleTagHelperService>
     {
-        public AbpTableStyle AbpTableStyle { get; set; } = AbpTableStyle.Default;
+        public AbpTableStyle TableStyle { get; set; } = AbpTableStyle.Default;
-
-        public AbpTableStyle AbpDarkTableStyle { get; set; } = AbpTableStyle.Default;
 
         public AbpTableStyleTagHelper(AbpTableStyleTagHelperService tagHelperService)
             : base(tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Table/AbpTableStyleTagHelperService.cs

@@ -12,17 +12,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Table
 
         protected virtual void SetStyle(TagHelperContext context, TagHelperOutput output)
         {
-            if (TagHelper.AbpTableStyle != AbpTableStyle.Default)
+            if (TagHelper.TableStyle != AbpTableStyle.Default)
             {
-                output.Attributes.AddClass("table-" + TagHelper.AbpTableStyle.ToString().ToLowerInvariant());
+                output.Attributes.AddClass("table-" + TagHelper.TableStyle.ToString().ToLowerInvariant());
-            }
-        }
-
-        protected virtual void SetDarkTableStyle(TagHelperContext context, TagHelperOutput output)
-        {
-            if (TagHelper.AbpDarkTableStyle != AbpTableStyle.Default)
-            {
-                output.Attributes.AddClass("bg-" + TagHelper.AbpDarkTableStyle.ToString().ToLowerInvariant());
             }
         }
     }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tooltip/AbpTooltipTagHelperService.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+using System;
+using System.Linq;
+using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tooltip
 {
@@ -6,19 +8,40 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tooltip
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
+            if (IsButtonDisabled(context, output))
+            {
+                SetParentElementWithTooltip(context, output);
+                return;
+            }
+
             SetDataToggle(context, output);
             SetDataPlacement(context, output);
             SetTooltipTitle(context, output);
         }
 
+        protected virtual void SetParentElementWithTooltip(TagHelperContext context, TagHelperOutput output)
+        {
+            var directory = GetDirectory() != TooltipDirectory.Default ? GetDirectory() : TooltipDirectory.Top;
+            output.Attributes.Add("data-placement", directory.ToString().ToLowerInvariant());
+
+            output.PreElement.SetHtmlContent(
+                "<span class=\"d-inline-block\" tabindex=\"0\" data-toggle=\"tooltip\" " +
+                "data-placement=\"" + directory.ToString().ToLowerInvariant() +
+                "\" title=\"" + GetTitle() + "\">" + Environment.NewLine);
+
+            output.PostElement.SetHtmlContent(Environment.NewLine + "</span>");
+
+            output.Attributes.Add("style", "pointer-events: none;");
+        }
+
         protected virtual void SetDataToggle(TagHelperContext context, TagHelperOutput output)
         {
-            output.Attributes.Add("data-toggle","tooltip");
+            output.Attributes.Add("data-toggle", "tooltip");
         }
 
         protected virtual void SetDataPlacement(TagHelperContext context, TagHelperOutput output)
         {
-            var directory = GetDirectory() != TooltipDirectory.Default ? GetDirectory() : TooltipDirectory.Bottom;
+            var directory = GetDirectory() != TooltipDirectory.Default ? GetDirectory() : TooltipDirectory.Top;
             output.Attributes.Add("data-placement", directory.ToString().ToLowerInvariant());
         }
 
@@ -65,5 +88,10 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tooltip
 
             return TooltipDirectory.Default;
         }
+
+        protected virtual bool IsButtonDisabled(TagHelperContext context, TagHelperOutput output)
+        {
+            return output.Attributes.Any(a => a.Name == "disabled");
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/AbpAspNetCoreMvcModule.cs

@@ -75,14 +75,22 @@ namespace Volo.Abp.AspNetCore.Mvc
             var mvcCoreBuilder = context.Services.AddMvcCore();
             context.Services.ExecutePreConfiguredActions(mvcCoreBuilder);
 
+            var abpMvcDataAnnotationsLocalizationOptions = context.Services.ExecutePreConfiguredActions(new AbpMvcDataAnnotationsLocalizationOptions());
+
+            context.Services
+                .AddSingleton<IOptions<AbpMvcDataAnnotationsLocalizationOptions>>(
+                    new OptionsWrapper<AbpMvcDataAnnotationsLocalizationOptions>(
+                        abpMvcDataAnnotationsLocalizationOptions
+                    )
+                );
+
             var mvcBuilder = context.Services.AddMvc()
                 .AddDataAnnotationsLocalization(options =>
                 {
-                    var assemblyResources = context.Services.ExecutePreConfiguredActions(new AbpMvcDataAnnotationsLocalizationOptions()).AssemblyResources;
 
                     options.DataAnnotationLocalizerProvider = (type, factory) =>
                     {
-                        var resourceType = assemblyResources.GetOrDefault(type.Assembly);
+                        var resourceType = abpMvcDataAnnotationsLocalizationOptions.AssemblyResources.GetOrDefault(type.Assembly);
                         return factory.Create(resourceType ?? type);
                     };
                 })

framework/test/Volo.Abp.AspNetCore.Mvc.Tests/Volo/Abp/AspNetCore/Mvc/AbpAspNetCoreMvcTestModule.cs

@@ -14,7 +14,6 @@ using Volo.Abp.Localization.Resources.AbpValidation;
 using Volo.Abp.MemoryDb;
 using Volo.Abp.Modularity;
 using Volo.Abp.TestApp;
-using Volo.Abp.UI;
 using Volo.Abp.VirtualFileSystem;
 
 namespace Volo.Abp.AspNetCore.Mvc

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml

@@ -10,84 +10,269 @@
     </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>Alerts</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p>
 
-<h4># Alert Example</h4>
+<h4>Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-
+        <abp-alert alert-type="Primary">
+            A simple primary alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Secondary">
+            A simple secondary  alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Success">
+            A simple success  alert—check it out!
+        </abp-alert>
         <abp-alert alert-type="Danger">
-            I'm an abp alert!
+            A simple danger  alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Warning">
+            A simple warning  alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Info">
+            A simple info  alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Light">
+            A simple light  alert—check it out!
+        </abp-alert>
+        <abp-alert alert-type="Dark">
+            A simple dark  alert—check it out!
         </abp-alert>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
+    A simple primary alert&mdash;check it out!
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
+    A simple secondary  alert&mdash;check it out!
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Success&quot;&gt;
+    A simple success  alert&mdash;check it out!
+&lt;/abp-alert&gt;
 &lt;abp-alert alert-type=&quot;Danger&quot;&gt;
-     I&#39;m an abp alert!
+    A simple danger  alert&mdash;check it out!
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
+    A simple warning  alert&mdash;check it out!
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Info&quot;&gt;
+    A simple info  alert&mdash;check it out!
 &lt;/abp-alert&gt;
-</pre>
+&lt;abp-alert alert-type=&quot;Light&quot;&gt;
+    A simple light  alert&mdash;check it out!
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
+    A simple dark  alert&mdash;check it out!
+&lt;/abp-alert&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+<pre><code>
+&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
+    A simple primary alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
+    A simple secondary alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
+    A simple success alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
+    A simple danger alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
+    A simple warning alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
+    A simple info alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
+    A simple light alert&mdash;check it out!
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
+    A simple dark alert&mdash;check it out!
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Dismissible Alert Example</h4>
+<h4>Link color</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-
+        <abp-alert alert-type="Primary">
-        <abp-alert alert-type="Warning" dismissible="true">
+            A simple primary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
-            I'm a dismissible abp alert!
+        </abp-alert>
+        <abp-alert alert-type="Secondary">
+            A simple secondary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+        </abp-alert>
+        <abp-alert alert-type="Success">
+            A simple success alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+        </abp-alert>
+        <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>
+        <abp-alert alert-type="Warning">
+            A simple warning alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+        </abp-alert>
+        <abp-alert alert-type="Info">
+            A simple info alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+        </abp-alert>
+        <abp-alert alert-type="Light">
+            A simple light alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
+        </abp-alert>
+        <abp-alert alert-type="Dark">
+            A simple dark alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
         </abp-alert>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-alert alert-type=&quot;Warning&quot; dismissible=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper">
-     I&#39;m a dismissible abp alert!
+                <pre><code>
+&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
+    A simple primary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
+    A simple secondary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Success&quot;&gt;
+    A simple success alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Danger&quot;&gt;
+    A simple danger alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
 &lt;/abp-alert&gt;
-</pre>
+&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
+    A simple warning alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Info&quot;&gt;
+    A simple info alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Light&quot;&gt;
+    A simple light alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
+    A simple dark alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/abp-alert&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+<pre><code>
+&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
+    A simple primary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
+    A simple secondary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
+    A simple success alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
+    A simple danger alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
+    A simple warning alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
+    A simple info alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
+    A simple light alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
+    A simple dark alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Alert With Link Example</h4>
+<h4>Additional content</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-
+        <abp-alert alert-type="Success">
-        <abp-alert alert-type="Secondary">
+            <h4>Well done!</h4>
-            I'm an abp alert with <a abp-alert-link href="#">Link</a>!
+            <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>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-alert alert-type=&quot;Info&quot;&gt;
+            <abp-tab title="Tag Helper">
-      I&#39;m an abp alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;Link&lt;/a&gt;!
+                <pre><code>
+&lt;abp-alert alert-type=&quot;Success&quot;&gt;
+    &lt;h4&gt;Well done!&lt;/h4&gt;
+    &lt;p&gt;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.&lt;/p&gt;
+    &lt;hr&gt;
+    &lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
 &lt;/abp-alert&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
+    &lt;h4 class=&quot;alert-heading&quot;&gt;Well done!&lt;/h4&gt;
+    &lt;p&gt;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.&lt;/p&gt;
+    &lt;hr&gt;
+    &lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Alert With Header Example</h4>
+<h4>Dismissing</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-alert alert-type="Primary">
+        <abp-alert alert-type="Warning" dismissible="true">
-            <h4>Header</h4>
+            Holy guacamole! You should check in on some of those fields below.
-            I'm an abp alert!
         </abp-alert>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
+            <abp-tab title="Tag Helper">
-    &lt;h4&gt;Header&lt;/h4&gt;
+                <pre><code>
-    I&#39;m an abp alert!
+&lt;abp-alert alert-type=&quot;Warning&quot; dismissible=&quot;true&quot;&gt;
+    Holy guacamole! You should check in on some of those fields below.
 &lt;/abp-alert&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
+  Holy guacamole! You should check in on some of those fields below.
+  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
+    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml

@@ -10,30 +10,215 @@
     </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>Badges</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> Bootstrap Badge</a>.</p>
 
-<h4># Badges Examples</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <span abp-badge="Primary">I'm an abp badge!</span>
+        <h1>Example heading <span abp-badge="Secondary">New</span></h1>
-        <span abp-badge-pill="Warning">I'm an abp pill badge!</span>
+        <h2>Example heading <span abp-badge="Secondary">New</span></h2>
-        <a abp-badge="Danger" href="#">I'm an abp badge link!</a>
+        <h3>Example heading <span abp-badge="Secondary">New</span></h3>
-        <a abp-badge-pill="Success" href="#">I'm an abp pill badge link!</a>
+        <h4>Example heading <span abp-badge="Secondary">New</span></h4>
+        <h5>Example heading <span abp-badge="Secondary">New</span></h5>
+        <h6>Example heading <span abp-badge="Secondary">New</span></h6>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;h1&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
+&lt;h4&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
+&lt;h5&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
+&lt;h6&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
+&lt;h4&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
+&lt;h5&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
+&lt;h6&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-button button-type="Primary">
+            Notifications <span abp-badge="Light">4</span>
+        </abp-button>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;span abp-badge=&quot;Primary&quot; &gt;I&#39;m an abp badge!&lt;/span&gt;
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button button-type=&quot;Primary&quot;&gt;
+    Notifications &lt;span abp-badge=&quot;Light&quot;&gt;4&lt;/span&gt;
+&lt;/abp-button&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
+  Notifications &lt;span class=&quot;badge badge-light&quot;&gt;4&lt;/span&gt;
+&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
-&lt;span abp-badge-pill=&quot;Warning&quot; &gt;I&#39;m an abp pill badge!&lt;/span&gt;
+<h4>Contextual variations</h4>
 
-&lt;a abp-badge=&quot;Danger&quot; href=&quot;#&quot; &gt;I&#39;m an abp badge link!&lt;/a&gt;
+<div class="demo-with-code">
+    <div class="demo-area">
 
-&lt;a abp-badge-pill=&quot;Success&quot; href=&quot;#&quot; &gt;I&#39;m an abp pill badge link!&lt;/a&gt;
+        <span abp-badge="Primary">Primary</span>
-</pre>
+        <span abp-badge="Secondary">Secondary</span>
+        <span abp-badge="Success">Success</span>
+        <span abp-badge="Danger">Danger</span>
+        <span abp-badge="Warning">Warning</span>
+        <span abp-badge="Info">Info</span>
+        <span abp-badge="Light">Light</span>
+        <span abp-badge="Dark">Dark</span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-badge=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span abp-badge=&quot;Success&quot;&gt;Success&lt;/span&gt;
+&lt;span abp-badge=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span abp-badge=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span abp-badge=&quot;Info&quot;&gt;Info&lt;/span&gt;
+&lt;span abp-badge=&quot;Light&quot;&gt;Light&lt;/span&gt;
+&lt;span abp-badge=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
+&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
+&lt;span class=&quot;badge badge-light&quot;&gt;Light&lt;/span&gt;
+&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
+
+<h4>Pill badges</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <span abp-badge-pill="Primary">Primary</span>
+        <span abp-badge-pill="Secondary">Secondary</span>
+        <span abp-badge-pill="Success">Success</span>
+        <span abp-badge-pill="Danger">Danger</span>
+        <span abp-badge-pill="Warning">Warning</span>
+        <span abp-badge-pill="Info">Info</span>
+        <span abp-badge-pill="Light">Light</span>
+        <span abp-badge-pill="Dark">Dark</span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-badge-pill=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Success&quot;&gt;Success&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Info&quot;&gt;Info&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Light&quot;&gt;Light&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;badge badge-pill badge-primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-success&quot;&gt;Success&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-info&quot;&gt;Info&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-light&quot;&gt;Light&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Links</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <a href="#" abp-badge="Primary">Primary</a>
+        <a href="#" abp-badge="Secondary">Secondary</a>
+        <a href="#" abp-badge="Success">Success</a>
+        <a href="#" abp-badge="Danger">Danger</a>
+        <a href="#" abp-badge="Warning">Warning</a>
+        <a href="#" abp-badge="Info">Info</a>
+        <a href="#" abp-badge="Light">Light</a>
+        <a href="#" abp-badge="Dark">Dark</a>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;a href=&quot;#&quot; abp-badge=&quot;Primary&quot;&gt;Primary&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Success&quot;&gt;Success&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Danger&quot;&gt;Danger&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Warning&quot;&gt;Warning&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Info&quot;&gt;Info&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Light&quot;&gt;Light&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Dark&quot;&gt;Dark&lt;/a&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;a href=&quot;#&quot; class=&quot;badge badge-primary&quot;&gt;Primary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml

@@ -10,43 +10,206 @@
     </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>
+}
+
+<style>
+    .border-span span {
+        display: inline-block;
+        width: 5rem;
+        height: 5rem;
+        margin: .25rem;
+        background-color: #f5f5f5;
+    }
+</style>
+
+<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>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>
+<h4>Border</h4>
+
+<h5>Additive</h5>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area border-span">
-        <span abp-border="Default">aaa</span>
+        <span abp-border="Default"></span>
-        <span abp-border="Top">bbb</span>
+        <span abp-border="Top"></span>
-        <span abp-border="Right">ccc</span>
+        <span abp-border="Right"></span>
-        <span abp-border="Left">ddd</span>
+        <span abp-border="Bottom"></span>
-        <span abp-border="Bottom">eee</span>
+        <span abp-border="Left"></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>
+        <abp-tabs>
-&lt;span abp-border=&quot;Default&quot;&gt;aaa&lt;/span&gt;
+            <abp-tab title="Tag Helper">
-&lt;span abp-border=&quot;Top&quot;&gt;bbb&lt;/span&gt;
+                <pre><code>
-&lt;span abp-border=&quot;Right&quot;&gt;ccc&lt;/span&gt;
+&lt;span abp-border=&quot;Default&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Left&quot;&gt;ddd&lt;/span&gt;
+&lt;span abp-border=&quot;Top&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Bottom&quot;&gt;eee&lt;/span&gt;
+&lt;span abp-border=&quot;Right&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Top_0&quot;&gt;fff&lt;/span&gt;
+&lt;span abp-border=&quot;Bottom&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Right_0&quot;&gt;ggg&lt;/span&gt;
+&lt;span abp-border=&quot;Left&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Left_0&quot;&gt;hhh&lt;/span&gt;
+</code></pre>
-&lt;span abp-border=&quot;Bottom_0&quot;&gt;iii&lt;/span&gt;
+            </abp-tab>
-&lt;span abp-border=&quot;Top_Primary&quot;&gt;jjj&lt;/span&gt;
+            <abp-tab title="Rendered">
-&lt;span abp-border=&quot;Warning_0&quot;&gt;kkk&lt;/span&gt;
+                <pre><code>
-&lt;span abp-border=&quot;Bottom_Primary_0&quot;&gt;lll&lt;/span&gt;
+&lt;span class=&quot;border&quot;&gt;&lt;/span&gt;
-&lt;span abp-border=&quot;Left_Danger&quot;&gt;mmm&lt;/span&gt;
+&lt;span class=&quot;border-top&quot;&gt;&lt;/span&gt;
-</pre>
+&lt;span class=&quot;border-right&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-bottom&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-left&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
+
+<h5>Subtractive</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="_0"></span>
+        <span abp-border="Top_0"></span>
+        <span abp-border="Right_0"></span>
+        <span abp-border="Bottom_0"></span>
+        <span abp-border="Left_0"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;_0&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;Bottom_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Left_0&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;borde-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-top-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-right-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-bottom-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-left-0&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Border color</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="Primary"></span>
+        <span abp-border="Secondary"></span>
+        <span abp-border="Success"></span>
+        <span abp-border="Danger"></span>
+        <span abp-border="Info"></span>
+        <span abp-border="Light"></span>
+        <span abp-border="Dark"></span>
+        <span abp-border="White" ></span>
+        <br/>
+        <span abp-border="Left_Primary"></span>
+        <span abp-border="Top_Secondary"></span>
+        <span abp-border="Right_Success"></span>
+        <span abp-border="Bottom_Danger"></span>
+        <span abp-border="Bottom_Warning"></span>
+        <span abp-border="Left_Info"></span>
+        <span abp-border="Top_Light"></span>
+        <span abp-border="Right_Dark"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;Primary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Secondary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Success&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Danger&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Info&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Light&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Dark&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;White&quot;&gt;&lt;/span&gt;
+&lt;br/&gt;
+&lt;span abp-border=&quot;Left_Primary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top_Secondary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right_Success&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Bottom_Danger&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;bottom_Warning&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Left_Info&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top_Light&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right_Dark&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;border border-primary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-secondary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-success&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-danger&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-warning&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-info&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-light&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-dark&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-white&quot;&gt;&lt;/span&gt;
+&lt;br/&gt;
+&lt;span class=&quot;border border-left border-primary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-top border-secondary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-right border-success&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-bottom border-danger&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-bottom border-warning&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-left border-info&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-top border-light&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-right border-dark&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Border-radius</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="Primary" abp-rounded="Default"></span>
+        <span abp-border="Primary" abp-rounded="_0"></span>
+        <span abp-border="Primary" abp-rounded="Top"></span>
+        <span abp-border="Primary" abp-rounded="Left"></span>
+        <span abp-border="Primary" abp-rounded="Bottom"></span>
+        <span abp-border="Primary" abp-rounded="Right"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Default&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Top&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Left&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Bottom&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Right&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;border border-primary rounded&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-top&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-left&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-bottom&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-right&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml

@@ -10,29 +10,87 @@
     </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>Breadcrumbs</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/breadcrumbs/" target="_blank"> Bootstrap Breadcrumb</a>.</p>
 
-<h4># Breadcrumb Examples</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
+        <abp-breadcrumb>
+            <abp-breadcrumb-item title="Home" />
+        </abp-breadcrumb>
+
         <abp-breadcrumb>
             <abp-breadcrumb-item href="#" title="Home" />
-            <abp-breadcrumb-item href="#" title="Library" />
+            <abp-breadcrumb-item title="Library" />
-            <abp-breadcrumb-item title="Page" />
         </abp-breadcrumb>
 
+        <abp-breadcrumb>
+            <abp-breadcrumb-item href="#" title="Home" />
+            <abp-breadcrumb-item href="#" title="Library"/>
+            <abp-breadcrumb-item title="Page"/>
+        </abp-breadcrumb>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+
 &lt;abp-breadcrumb&gt;
-   &lt;abp-breadcrumb-item href=&quot;#&quot; title=&quot;Home&quot;/&gt;
+    &lt;abp-breadcrumb-item title=&quot;Home&quot; /&gt;
-   &lt;abp-breadcrumb-item href=&quot;#&quot; title=&quot;Library&quot;/&gt;
-   &lt;abp-breadcrumb-item title=&quot;Page&quot;/&gt;
 &lt;/abp-breadcrumb&gt;
-</pre>
+
+&lt;abp-breadcrumb&gt;
+    &lt;abp-breadcrumb-item href=&quot;#&quot; title=&quot;Home&quot; /&gt;
+    &lt;abp-breadcrumb-item title=&quot;Library&quot; /&gt;
+&lt;/abp-breadcrumb&gt;
+
+&lt;abp-breadcrumb&gt;
+    &lt;abp-breadcrumb-item href=&quot;#&quot; title=&quot;Home&quot; /&gt;
+    &lt;abp-breadcrumb-item href=&quot;#&quot; title=&quot;Library&quot;/&gt;
+    &lt;abp-breadcrumb-item title=&quot;Page&quot;/&gt;
+&lt;/abp-breadcrumb&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
+  &lt;ol class=&quot;breadcrumb&quot;&gt;
+    &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Home&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/nav&gt;
+
+&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
+  &lt;ol class=&quot;breadcrumb&quot;&gt;
+    &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Library&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/nav&gt;
+
+&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
+  &lt;ol class=&quot;breadcrumb&quot;&gt;
+    &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
+    &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/nav&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml

@@ -0,0 +1,288 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel
+@{
+    ViewData["Title"] = "ButtonGroups";
+}
+
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </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>Button groups</h2>
+
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/button-group/" target="_blank"> Bootstrap Button group</a>.</p>
+
+<h4>Basic example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-button-group>
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Left&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Middle&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Right&lt;/abp-button&gt;
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Left&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Middle&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Right&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Button toolbar</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-toolbar>
+            <abp-button-group class="mr-2">
+                <abp-button button-type="Secondary">1</abp-button>
+                <abp-button button-type="Secondary">2</abp-button>
+                <abp-button button-type="Secondary">3</abp-button>
+                <abp-button button-type="Secondary">4</abp-button>
+            </abp-button-group>
+            <abp-button-group class="mr-2">
+                <abp-button button-type="Secondary">5</abp-button>
+                <abp-button button-type="Secondary">6</abp-button>
+                <abp-button button-type="Secondary">7</abp-button>
+            </abp-button-group>
+            <abp-button-group>
+                <abp-button button-type="Secondary">8</abp-button>
+            </abp-button-group>
+        </abp-button-toolbar>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+    &lt;abp-button-toolbar&gt;
+    &lt;abp-button-group class=&quot;mr-2&quot;&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;3&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;4&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;abp-button-group class=&quot;mr-2&quot;&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;5&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;6&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;7&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;8&lt;/abp-button&gt;
+    &lt;/abp-button-group&gt;
+    &lt;/abp-button-toolbar&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-toolbar&quot; role=&quot;toolbar&quot;&gt;
+  &lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;3&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;4&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;5&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;6&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;7&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;8&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Sizing</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group size="Large">
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+        <br><br>
+        <abp-button-group>
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+        <br><br>
+        <abp-button-group size="Small">
+            <abp-button button-type="Secondary">Left</abp-button>
+            <abp-button button-type="Secondary">Middle</abp-button>
+            <abp-button button-type="Secondary">Right</abp-button>
+        </abp-button-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group size=&quot;Large&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group&gt;
+    ...
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group size=&quot;Small&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group btn-group-lg&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+
+&lt;div class=&quot;btn-group btn-group-sm&quot; role=&quot;group&quot;&gt;
+    ...
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Vertical variation</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group>
+            <abp-button button-type="Secondary">1</abp-button>
+            <abp-button button-type="Secondary">2</abp-button>
+            <abp-dropdown>
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-button-group>
+        </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
+    &lt;abp-dropdown&gt;
+        &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot; /&gt;
+        &lt;abp-dropdown-menu&gt;
+            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
+            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
+        &lt;/abp-dropdown-menu&gt;
+    &lt;/abp-dropdown&gt;
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group with nested dropdown&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
+
+  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
+    &lt;button id=&quot;btnGroupDrop1&quot; type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+      Dropdown
+    &lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;btnGroupDrop1&quot;&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Nesting</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-button-group direction="Vertical">
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-dropdown direction="Right">
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-button button-type="Secondary">button</abp-button>
+            <abp-dropdown direction="Left">
+                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+            <abp-button button-type="Secondary">button</abp-button>
+        </abp-button-group>
+        </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button-group direction=&quot;Vertical&quot;&gt;
+    ...
+&lt;/abp-button-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group-vertical&quot;&gt;
+  ...
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml.cs → framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs

@@ -7,7 +7,7 @@ using Microsoft.AspNetCore.Mvc.RazorPages;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
 {
-    public class ImagesModel : PageModel
+    public class ButtonGroupsModel : PageModel
     {
         public void OnGet()
         {

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml

@@ -7,19 +7,32 @@
 @section styles {
     <abp-style-bundle>
         <abp-style src="/css/demo.css" />
+        <abp-style src="/libs/highlight.js/styles/default.css" />
     </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>Buttons</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap button</a>.</p>
 
-<h4># Example</h4>
+<h4>Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-button text="Default" />
-        <abp-button button-type="Primary">Primary</abp-button>
+        <abp-button button-type="Primary" text="Primary" />
         <abp-button button-type="Secondary">Secondary</abp-button>
         <abp-button button-type="Success">Success</abp-button>
         <abp-button button-type="Danger">Danger</abp-button>
@@ -30,22 +43,76 @@
         <abp-button button-type="Link">Link</abp-button>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-button text=&quot;Default&quot;/&gt;
+            <abp-tab title="Tag Helper">
-&lt;abp-button button-type="Primary"&gt;Primary&lt;/abp-button&gt;
+                <pre><code>
-&lt;abp-button button-type="Secondary"&gt;Secondary&lt;/abp-button&gt;
+&lt;abp-button&gt; Default &lt;/abp-button&gt;
-&lt;abp-button button-type="Success"&gt;Success&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Primary&quot;&gt;Primary&lt;/abp-button&gt;
-&lt;abp-button button-type="Danger"&gt;Danger&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Secondary&quot;&gt;Secondary&lt;/abp-button&gt;
-&lt;abp-button button-type="Warning"&gt;Warning&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Success&quot;&gt;Success&lt;/abp-button&gt;
-&lt;abp-button button-type="Info"&gt;Info&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Danger&quot;&gt;Danger&lt;/abp-button&gt;
-&lt;abp-button button-type="Light"&gt;Light&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Warning&quot;&gt;Warning&lt;/abp-button&gt;
-&lt;abp-button button-type="Dark"&gt;Dark&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Info&quot;&gt;Info&lt;/abp-button&gt;
-&lt;abp-button button-type="Link"&gt;Link&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Light&quot;&gt;Light&lt;/abp-button&gt;
-</pre>
+&lt;abp-button button-type=&quot;Dark&quot;&gt;Dark&lt;/abp-button&gt;
+
+&lt;abp-button button-type=&quot;Link&quot;&gt;Link&lt;/abp-button&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+<pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Default&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Secondary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Light&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;Dark&lt;/button&gt;
+
+&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;Link&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Button tags</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <a abp-button="Primary" href="#">Link</a>
+        <abp-button button-type="Primary" type="submit" text="Button" />
+        <input abp-button="Primary" value="Input" />
+        <input abp-button="Primary" type="submit" value="Submit" />
+        <input abp-button="Primary" type="reset" value="Reset" />
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+<pre><code>
+&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt;
+&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt;
+&lt;input abp-button="Primary" value="Input" /&gt;
+&lt;input abp-button="Primary" type="submit" value="Submit" /&gt;
+&lt;input abp-button="Primary" type="reset" value="Reset" /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Link&lt;/a&gt;
+&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Button&lt;/button&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;button&quot; value=&quot;Input&quot;&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;reset&quot; value=&quot;Reset&quot;&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Outline buttons</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -59,7 +126,9 @@
         <abp-button button-type="Outline_Dark">Dark</abp-button>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-button button-type="Outline_Primary"&gt;Primary&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Secondary"&gt;Secondary&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Success"&gt;Success&lt;/abp-button&gt;
@@ -68,133 +137,164 @@
 &lt;abp-button button-type="Outline_Info"&gt;Info&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Light"&gt;Light&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Dark"&gt;Dark&lt;/abp-button&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;Primary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Secondary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Danger&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-info&quot;&gt;Info&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Light&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;Dark&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Sizes</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area" style="margin: 35px;">
+    <div class="demo-area">
-        <a abp-button="Primary" href="#">Link</a>
+        <abp-button size="Large" button-type="Primary" text="Large button" />
-        <abp-button button-type="Primary" type="submit" text="Button" />
+        <abp-button size="Large" button-type="Secondary" text="Large button" />
-        <input abp-button="Primary" value="Input" />
-        <input abp-button="Primary" type="submit" value="Submit" />
-        <input abp-button="Primary" type="reset" value="Reset" />
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt;
+            <abp-tab title="Tag Helper">
-&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt;
+                <pre><code>
-&lt;input abp-button="Primary" value="Input" /&gt;
+&lt;abp-button size=&quot;Large&quot; button-type=&quot;Primary&quot; text=&quot;Large button&quot; /&gt;
-&lt;input abp-button="Primary" type="submit" value="Submit" /&gt;
+&lt;abp-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
-&lt;input abp-button="Primary" type="reset" value="Reset" /&gt;
+</code></pre>
-</pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Large button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg&quot;&gt;Large button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button size="Default" text="Default" />
+        <abp-button size="Small" button-type="Primary" text="Small button" />
-        <abp-button size="Small" text="Small" />
+        <abp-button size="Small" button-type="Secondary" text="Small button" />
-        <abp-button size="Medium" text="Medium" />
-        <abp-button size="Large" text="Large" />
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-button size=&quot;Default&quot; text=&quot;Default&quot; /&gt;
+            <abp-tab title="Tag Helper">
-&lt;abp-button size=&quot;Small&quot; text=&quot;Small&quot; /&gt;
+                <pre><code>
-&lt;abp-button size=&quot;Medium&quot; text=&quot;Medium&quot; /&gt;
+&lt;abp-button size=&quot;Small&quot; button-type=&quot;Primary&quot; text=&quot;Small button&quot; /&gt;
-&lt;abp-button size=&quot;Large&quot; text=&quot;Large&quot; /&gt;
+&lt;abp-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;Small button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-sm&quot;&gt;Small button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
-
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button block="true" text="Block" />
+        <abp-button size="Block" button-type="Primary" text="Block level button" />
+        <abp-button size="Block" button-type="Secondary" text="Block level button" />
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-button block=&quot;true&quot; text=&quot;Block&quot; /&gt;
+            <abp-tab title="Tag Helper">
-</pre>
+                <pre><code>
+&lt;abp-button size=&quot;Block&quot; button-type=&quot;Primary&quot; text=&quot;Block level button&quot; /&gt;
+&lt;abp-button size=&quot;Block&quot; button-type=&quot;Secondary&quot; text=&quot;Block level button&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+
+<h4> Icon</h4>
 
 <div class="demo-with-code">
+
     <div class="demo-area">
+        <abp-button icon="pencil" text="With Icon" />
         <abp-button icon-type="FontAwesome" icon="info" text="With Icon" />
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button icon=&quot;pencil&quot; text=&quot;With Icon&quot;/&gt;
 &lt;abp-button icon-type=&quot;FontAwesome&quot; icon=&quot;info&quot; text=&quot;With Icon&quot;/&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
+&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-info&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
-
-<h4># Example</h4>
 
-<div class="demo-with-code">
+    <div class="attribute-area">
-    <div class="demo-area">
+        <ul>
-        <abp-button text="Busy" busy-text="Saving..." />
+            <li>
-    </div>
+                <b>icon-type</b>: Formats the icon attribute. Default value is FontAwesome.
-    <div class="code-area">
+            </li>
-        <pre>
+            <li>
-&lt;abp-button text=&quot;Busy&quot; busy-text=&quot;Saving...&quot;/&gt;
+                <b>icon</b>: Sets icon to button.
-</pre>
+            </li>
+        </ul>
     </div>
 </div>
 
-<h4># Group Examples</h4>
 
-<div class="demo-with-code">
+<h4> Busy Text Example</h4>
-    <div class="demo-area">
 
-        <abp-button-group>
-            <abp-button>Left</abp-button>
-            <abp-button>Middle</abp-button>
-            <abp-button>Right</abp-button>
-        </abp-button-group>
 
-        <abp-button-group size="Large">
+<div class="demo-with-code">
-            <abp-button button-type="Primary">Primary</abp-button>
-            <abp-button button-type="Secondary">Secondary</abp-button>
-            <abp-button button-type="Success">Success</abp-button>
-        </abp-button-group>
 
-        <abp-button-group direction="Vertical" size="Small">
+    <div class="demo-area">
-            <abp-button button-type="Primary">Top</abp-button>
+            <abp-button text="Busy" busy-text="Saving..."/>
-            <abp-button button-type="Warning">Middle</abp-button>
-            <abp-button button-type="Danger">Bottom</abp-button>
-        </abp-button-group>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-
+            <abp-tab title="Tag Helper">
-&lt;abp-button-group&gt;
+                <pre><code>
-    &lt;abp-button&gt; Left &lt;/abp-button&gt;
+&lt;abp-button text=&quot;Busy&quot; busy-text=&quot;Saving...&quot;/&gt;
-    &lt;abp-button&gt; Middle &lt;/abp-button&gt;
+</code></pre>
-    &lt;abp-button&gt; Right &lt;/abp-button&gt;
+            </abp-tab>
-&lt;/abp-button-group&gt;
+            <abp-tab title="Generated">
-
+                <pre><code>
-&lt;abp-button-group size=&quot;Large&quot;&gt;
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Saving...&quot;&gt;&lt;span&gt;Busy&lt;/span&gt;&lt;/button&gt;
-    &lt;abp-button button-type=&quot;Primary&quot;&gt; Primary &lt;/abp-button&gt;
+</code></pre>
-    &lt;abp-button button-type=&quot;Secondary&quot;&gt; Secondary &lt;/abp-button&gt;
+            </abp-tab>
-    &lt;abp-button button-type=&quot;Success&quot;&gt; Success &lt;/abp-button&gt;
+        </abp-tabs>
-&lt;/abp-button-group&gt;
+    </div>
-
+
-&lt;abp-button-group direction=&quot;Vertical&quot; size=&quot;Small&quot;&gt;
+    <div class="attribute-area">
-    &lt;abp-button button-type=&quot;Primary&quot;&gt; Top &lt;/abp-button&gt;
+        <ul>
-    &lt;abp-button button-type=&quot;Warning&quot;&gt; Middle &lt;/abp-button&gt;
+            <li>
-    &lt;abp-button button-type=&quot;Danger&quot;&gt; Bottom &lt;/abp-button&gt;
+                <b>busy-text</b>: Sets "data-busy-text" attribute. Default value is localization of "ProcessingWithThreeDot" string.
-&lt;/abp-button-group&gt;
+            </li>
-</pre>
+        </ul>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml

@@ -10,135 +10,597 @@
     </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>Cards</h2>
 
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank"> Bootstrap card</a>.</p>
 
-<h4># Example</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-card>
+
-            <abp-card-header>Card header</abp-card-header>
+        <abp-card style="width: 18rem;">
-            <abp-card-body>Card body</abp-card-body>
+            <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
+            <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>
+                <a abp-button="Primary" href="#"> Go somewhere</a>
+            </abp-card-body>
         </abp-card>
+
     </div>
     <div class="code-area">
-        <pre>&lt;abp-card&gt;
+        <abp-tabs>
-    &lt;abp-card-header&gt;Card header&lt;/abp-card-header&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-card-body&gt;Card body&lt;/abp-card-body&gt;
+                <pre><code>
-&lt;/abp-card&gt;</pre>
+&lt;abp-card style=&quot;width: 18rem;&quot;&gt;
+  &lt;img abp-card-image=&quot;Top&quot; src=&quot;~/imgs/demo/300x200.png&quot;/&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&apos;s content.&lt;/abp-card-text&gt;
+    &lt;a abp-button=&quot;Primary&quot; href=&quot;#&quot;&gt; Go somewhere&lt;/a&gt;
+  &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
+  &lt;img class=&quot;card-img-top&quot; src=&quot;.../100px180/&quot; alt=&quot;Card image cap&quot;&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;
+    &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Titles, text, and links</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
+
         <abp-card style="width: 18rem;">
-            <abp-card-body title="Card title" subtitle="Card subtitle">
+            <abp-card-body>
-                <abp-card-text>
+                <abp-card-title>Card title</abp-card-title>
-                    This is a sample card component built by
+                <abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle>
-                    ABP bootstrap card tag helper.
+                <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>
-                </abp-card-text>
                 <a abp-card-link href="#">Card link</a>
                 <a abp-card-link href="#">Another link</a>
             </abp-card-body>
         </abp-card>
+
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-card style="width: 18rem;"&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-card-body title="Card title" subtitle="Card subtitle"&gt;
+                <pre><code>
-        &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;abp-card style=&quot;width: 18rem;&quot;&gt;
-        &lt;a abp-card-link href="#"&gt;Card link&lt;/a&gt;
+    &lt;abp-card-body&gt;
-        &lt;a abp-card-link href="#"&gt;Another link&lt;/a&gt;
+&lt;abp-card-title&gt;Card title&lt;/abp-card-title&gt;
+&lt;abp-card-subtitle class=&quot;mb-2 text-muted&quot;&gt;Card subtitle&lt;/abp-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&apos;s content.&lt;/abp-card-text&gt;
+&lt;a abp-card-link href=&quot;#&quot;&gt;Card link&lt;/a&gt;
+&lt;a abp-card-link href=&quot;#&quot;&gt;Another link&lt;/a&gt;
     &lt;/abp-card-body&gt;
 &lt;/abp-card&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
+    &lt;h6 class=&quot;card-subtitle mb-2 text-muted&quot;&gt;Card subtitle&lt;/h6&gt;
+    &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;
+    &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Card link&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Another link&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>List groups</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
+
+        <abp-card style="width: 18rem;">
+            <abp-list-group flush="true">
+                <abp-list-group-item>Cras justo odio</abp-list-group-item>
+                <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+                <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+            </abp-list-group>
+        </abp-card>
+
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-card style=&quot;width: 18rem;&quot;&gt;
+    &lt;abp-list-group flush=&quot;true&quot;&gt;
+&lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;/abp-list-group&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
+  &lt;ul class=&quot;list-group list-group-flush&quot;&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-card style="width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-list-group flush="true">
+                <abp-list-group-item>Cras justo odio</abp-list-group-item>
+                <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+                <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+            </abp-list-group>
+        </abp-card>
+
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-card style=&quot;width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-list-group flush=&quot;true&quot;&gt;
+&lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;/abp-list-group&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;
+    Featured
+  &lt;/div&gt;
+  &lt;ul class=&quot;list-group list-group-flush&quot;&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Kitchen sink</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
         <abp-card style="width: 18rem;">
-            <img abp-card-image="Top" src="~/imgs/demo/300x200.png">
+            <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
             <abp-card-body>
-                <abp-card-title>Card title</abp-card-title>
+                <abp-card-title>Card Title</abp-card-title>
-                <abp-card-text>
+                <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>
-                    This is a sample card component built by
+            </abp-card-body>
-                    ABP bootstrap card tag helper.
+            <abp-list-group flush="true">
-                </abp-card-text>
+                <abp-list-group-item>Cras justo odio</abp-list-group-item>
-                <a abp-button="Primary" href="#">Go somewhere &rarr;</a>
+                <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+                <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+            </abp-list-group>
+            <abp-card-body>
+                <a abp-card-link href="#">Card link</a>
+                <a abp-card-link href="#">Another link</a>
             </abp-card-body>
         </abp-card>
+
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-card style="width: 18rem;"&gt;
+            <abp-tab title="Tag Helper">
-    &lt;img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap"&gt;
+                <pre><code>
+&lt;abp-card style=&quot;width: 18rem;&quot;&gt;
+    &lt;img abp-card-image=&quot;Top&quot; src=&quot;~/imgs/demo/300x200.png&quot; /&gt;
     &lt;abp-card-body&gt;
-        &lt;abp-card-title&gt;Card title&lt;/abp-card-title&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;
+&lt;abp-card-text&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/abp-card-text&gt;
-        &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
+    &lt;/abp-card-body&gt;
+    &lt;abp-list-group flush=&quot;true&quot;&gt;
+&lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+&lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;/abp-list-group&gt;
+    &lt;abp-card-body&gt;
+&lt;a abp-card-link href=&quot;#&quot;&gt;Card link&lt;/a&gt;
+&lt;a abp-card-link href=&quot;#&quot;&gt;Another link&lt;/a&gt;
     &lt;/abp-card-body&gt;
 &lt;/abp-card&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
+  &lt;img class=&quot;card-img-top&quot; src=&quot;.../100px180/?text=Image cap&quot; alt=&quot;Card image cap&quot;&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;ul class=&quot;list-group list-group-flush&quot;&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+    &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Card link&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Another link&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Header and footer</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-card>
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+                <a abp-button="Primary" href="#"> Go somewhere</a>
+            </abp-card-body>
+        </abp-card>
+
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-card style=&quot;width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+&lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+&lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+&lt;a abp-button=&quot;Primary&quot; href=&quot;#&quot;&gt; Go somewhere&lt;/a&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;
+    Featured
+  &lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+    &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-card>
+            <abp-card-header>Quote</abp-card-header>
+            <abp-card-body>
+                <abp-blockquote>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                    <footer>Someone famous in Source Title</footer>
+                </abp-blockquote>
+            </abp-card-body>
+        </abp-card>
+
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-card&gt;
+    &lt;abp-card-header&gt;Quote&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+&lt;abp-blockquote&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
+    &lt;footer&gt;Someone famous in Source Title&lt;/footer&gt;
+&lt;/abp-blockquote&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;
+    Quote
+  &lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;blockquote class=&quot;blockquote mb-0&quot;&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
+      &lt;footer class=&quot;blockquote-footer&quot;&gt;Someone famous in Source Titl&lt;/footer&gt;
+    &lt;/blockquote&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
 <div class="demo-with-code">
     <div class="demo-area">
+
         <abp-card class="text-center">
-            <abp-card-header>
+            <abp-card-header>Featured</abp-card-header>
-                <ul class="nav nav-tabs card-header-tabs">
+            <abp-card-body>
-                    <li class="nav-item">
+                <abp-card-title> Special title treatment</abp-card-title>
-                        <a class="nav-link active" href="#">Active</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#link">Link</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link disabled" href="#disabledlink">Disabled</a>
-                    </li>
-                </ul>
-            </abp-card-header>
-            <abp-card-body title="Special title treatment">
                 <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
-                <a href="#" class="btn btn-primary">Go somewhere</a>
+                <a abp-button="Primary" href="#"> Go somewhere</a>
             </abp-card-body>
+            <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
         </abp-card>
+
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-card class="text-center"&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-card-header&gt;
+                <pre><code>
-        &lt;ul class="nav nav-tabs card-header-tabs"&gt;
+&lt;abp-card class=&quot;text-center&quot;&gt;
-            &lt;li class="nav-item"&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
-                &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
+    &lt;abp-card-body&gt;
-            &lt;/li&gt;
+&lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
-            &lt;li class="nav-item"&gt;
+&lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
-                &lt;a class="nav-link" href="#link"&gt;Link&lt;/a&gt;
+&lt;a abp-button=&quot;Primary&quot; href=&quot;#&quot;&gt; Go somewhere&lt;/a&gt;
-            &lt;/li&gt;
-            &lt;li class="nav-item"&gt;
-                &lt;a class="nav-link disabled" href="#disabledlink"&gt;Disabled&lt;/a&gt;
-            &lt;/li&gt;
-        &lt;/ul&gt;
-    &lt;/abp-card-header&gt;
-    &lt;abp-card-body title="Special title treatment"&gt;
-        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
-        &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
     &lt;/abp-card-body&gt;
+    &lt;abp-card-footer class=&quot;text-muted&quot;&gt; 2 days ago&lt;/abp-card-footer&gt;
 &lt;/abp-card&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card text-center&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;
+    Featured
+  &lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+    &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;card-footer text-muted&quot;&gt;
+    2 days ago
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<hr />
+<h4>Card styles</h4>
+
+<h5>Background and color</h5>
 
-<a asp-page="../">&lt; back</a>
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+        <abp-card background="Success" text-color="Danger" border="Dark" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+        <abp-card background="Warning" text-color="Secondary" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+        <abp-card background="Light" text-color="Dark" border="Success" class="mb-3"  style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+        <abp-card background="Dark" text-color="White" border="Danger" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+
+        <abp-card background="Danger" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header text-color="Primary">Featured</abp-card-header>
+            <abp-card-body>
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+
+        <abp-card background="Info" border="Danger" class="mb-3" style="max-width: 18rem;">
+            <abp-card-header>Featured</abp-card-header>
+            <abp-card-body text-color="Danger">
+                <abp-card-title> Special title treatment</abp-card-title>
+                <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+            </abp-card-body>
+        </abp-card>
+
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-card background=&quot;Primary&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Success&quot; text-color=&quot;Danger&quot; border=&quot;Dark&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Warning&quot; text-color=&quot;Secondary&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Light&quot; text-color=&quot;Dark&quot; border=&quot;Success&quot; class=&quot;mb-3&quot;  style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Dark&quot; text-color=&quot;White&quot; border=&quot;Danger&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Danger&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header text-color=&quot;Primary&quot;&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+
+&lt;abp-card background=&quot;Info&quot; border=&quot;Danger&quot; class=&quot;mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+    &lt;abp-card-header&gt;Featured&lt;/abp-card-header&gt;
+    &lt;abp-card-body text-color=&quot;Danger&quot;&gt;
+        &lt;abp-card-title&gt; Special title treatment&lt;/abp-card-title&gt;
+        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional content.&lt;/abp-card-text&gt;
+    &lt;/abp-card-body&gt;
+&lt;/abp-card&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;card bg-primary mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card text-danger bg-success border-dark mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card text-secondary bg-warning mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card text-dark bg-light border-success mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card text-white bg-dark border-danger mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card bg-danger mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header text-primary&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;card bg-info border-danger mb-3&quot; style=&quot;max-width: 18rem;&quot;&gt;
+  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
+  &lt;div class=&quot;card-body text-danger&quot;&gt;
+    &lt;h5 class=&quot;card-title&quot;&gt; Special title treatment&lt;/h5&gt;
+    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml

@@ -10,48 +10,272 @@
     </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>Carousels</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Carousel</a>.</p>
 
-<h4># Carousel Examples</h4>
+<h4>Slides only</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-carousel indicators="false" controls="false">
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+        </abp-carousel>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-carousel indicators=&quot;false&quot; controls=&quot;false&quot;&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+&lt;/abp-carousel&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div id=&quot;carouselExampleSlidesOnly&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
+  &lt;div class=&quot;carousel-inner&quot;&gt;
+    &lt;div class=&quot;carousel-item active&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Second slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>With controls</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-carousel indicators="false">
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+        </abp-carousel>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-carousel indicators=&quot;false&quot;&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+&lt;/abp-carousel&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
+  &lt;div class=&quot;carousel-inner&quot;&gt;
+    &lt;div class=&quot;carousel-item active&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
+    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
+    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>With indicators</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-carousel>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+        </abp-carousel>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-carousel&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+&lt;/abp-carousel&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
+  &lt;ol class=&quot;carousel-indicators&quot;&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+  &lt;div class=&quot;carousel-inner&quot;&gt;
+    &lt;div class=&quot;carousel-item active&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
+    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
+    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>With captions</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
+
         <abp-carousel>
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 1" caption="Caption" caption-title="title"></abp-carousel-item>
+            <abp-carousel-item caption-title="Second slide label" caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit." src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 2" caption="Caption2" caption-title="title2"></abp-carousel-item>
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 3" caption="Caption3" caption-title="title3"></abp-carousel-item>
         </abp-carousel>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-carousel&gt;
-   &lt;abp-carousel-item src=&quot;...&quot;  alt=&quot;Carousel Item 1&quot; caption=&quot;Caption&quot; caption-title=&quot;title&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item caption-title=&quot;Second slide label&quot; caption=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot; src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
-   &lt;abp-carousel-item src=&quot;...&quot; alt=&quot;Carousel Item 2&quot; caption=&quot;Caption2&quot; caption-title=&quot;title2&quot;&gt;&lt;/abp-carousel-item&gt;
-   &lt;abp-carousel-item src=&quot;...&quot; alt=&quot;Carousel Item 3&quot; caption=&quot;Caption3&quot; caption-title=&quot;title3&quot;&gt;&lt;/abp-carousel-item&gt;
 &lt;/abp-carousel&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
+  &lt;ol class=&quot;carousel-indicators&quot;&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
+    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+  &lt;div class=&quot;carousel-inner&quot;&gt;
+    &lt;div class=&quot;carousel-item active&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
+        &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
+            &lt;h5&gt;Second slide label&lt;/h5&gt;
+            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
+    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
+    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Carousel Examples</h4>
+
+<h4>Crossfade</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-carousel controls="true" indicators="false" crossfade="true">
+
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 1"></abp-carousel-item>
+        <abp-carousel indicators="false" crossfade="true">
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 2" caption="Caption2" caption-title="title2"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
-            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Carousel Item 3"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
+            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
         </abp-carousel>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-carousel controls=&quot;true&quot; indicators=&quot;false&quot; crossfade=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper">
-   &lt;abp-carousel-item src=&quot;...&quot;  alt=&quot;Carousel Item 1&quot;&gt;&lt;/abp-carousel-item&gt;
+                <pre><code>
-   &lt;abp-carousel-item src=&quot;...&quot; alt=&quot;Carousel Item 2&quot; caption=&quot;Caption2&quot; caption-title=&quot;title2&quot;&gt;&lt;/abp-carousel-item&gt;
+&lt;abp-carousel indicators=&quot;false&quot; crossfade=&quot;true&quot;&gt;
-   &lt;abp-carousel-item src=&quot;...&quot; alt=&quot;Carousel Item 3&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
+    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
 &lt;/abp-carousel&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div id=&quot;carouselExampleFade&quot; class=&quot;carousel slide carousel-fade&quot; data-ride=&quot;carousel&quot;&gt;
+  &lt;div class=&quot;carousel-inner&quot;&gt;
+    &lt;div class=&quot;carousel-item active&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...e&quot; alt=&quot;Second slide&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;carousel-item&quot;&gt;
+      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
+    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
+    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
+</div>
+

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml

@@ -11,72 +11,223 @@
         <abp-style src="/css/demo.css" />
     </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>Collapse</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/collapse/" target="_blank"> Bootstrap Collapse</a>.</p>
 
-<h4># Accordion Example</h4>
+
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-accordion>
+        <a abp-button="Primary" abp-collapse-id="collapseExample"> Link with href </a>
-            <abp-accordion-item title="header1">
+        <abp-button button-type="Primary" abp-collapse-id="collapseExample" text="Button with data-target" />
-                1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-            </abp-accordion-item>
-            <abp-accordion-item title="header2">
-                2Anim pariatur cliche reprehenderit,, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-            </abp-accordion-item>
-            <abp-accordion-item title="header3">
-                3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-            </abp-accordion-item>
-        </abp-accordion>
 
+        <abp-collapse-body id="collapseExample">
+            3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+        </abp-collapse-body>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-accordion&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-accordion-item title=&quot;header1&quot;&gt;
+                <pre><code>
-       1Anim pariatur cliche reprehenderit, enim eiusmod high life acc
+&lt;abp-button button-type=&quot;Primary&quot; abp-collapse-id=&quot;collapseExample&quot; text=&quot;Button with data-target&quot; /&gt;
-    &lt;/abp-accordion-item&gt;
+&lt;a abp-button=&quot;Primary&quot; abp-collapse-id=&quot;collapseExample&quot;&gt; Link with href &lt;/a&gt;
-    &lt;abp-accordion-item title=&quot;header2&quot;&gt;
+
-       2Anim pariatur cliche reprehenderit,, enim eiusmod high life
+&lt;abp-collapse-body id=&quot;collapseExample&quot;&gt;
-    &lt;/abp-accordion-item&gt;
+            ...
-    &lt;abp-accordion-item title=&quot;header3&quot;&gt;
+&lt;/abp-collapse-body&gt;
-       3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on i
+</code></pre>
-    &lt;/abp-accordion-item&gt;
+            </abp-tab>
-&lt;/abp-accordion&gt;
+            <abp-tab title="Rendered">
-</pre>
+                <pre><code>
+&lt;p&gt;
+  &lt;a class=&quot;btn btn-primary&quot; data-toggle=&quot;collapse&quot; href=&quot;#collapseExample&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
+    Link with href
+  &lt;/a&gt;
+  &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseExample&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
+    Button with data-target
+  &lt;/button&gt;
+&lt;/p&gt;
+&lt;div class=&quot;collapse&quot; id=&quot;collapseExample&quot;&gt;
+  &lt;div class=&quot;card card-body&quot;&gt;
+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Collapse With Button Example</h4>
+<h4>Multiple targets</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <p>
+        <a abp-button="Primary" abp-collapse-id="FirstCollapseExample"> Toggle first element </a>
-            <abp-collapse-button buton-type="Success" body-id="collapseExample">
+        <abp-button button-type="Primary" abp-collapse-id="SecondCollapseExample" text="Toggle second element" />
-                Toggle
+        <abp-button button-type="Primary" abp-collapse-id="FirstCollapseExample SecondCollapseExample" text="Toggle both elements" />
-            </abp-collapse-button>
-        </p>
-
-        <abp-collapse-body id="collapseExample" show="true">
-            3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-        </abp-collapse-body>
 
+        <abp-row class="mt-3">
+            <abp-column size-sm="_6">
+                <abp-collapse-body id="FirstCollapseExample" multi="true">
+                    3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </abp-collapse-body>
+            </abp-column>
+            <abp-column size-sm="_6">
+                <abp-collapse-body id="SecondCollapseExample" multi="true">
+                    3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </abp-collapse-body>
+            </abp-column>
+        </abp-row>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+
+&lt;a abp-button=&quot;Primary&quot; abp-collapse-id=&quot;FirstCollapseExample&quot;&gt; Toggle first element &lt;/a&gt;
+&lt;abp-button button-type=&quot;Primary&quot; abp-collapse-id=&quot;SecondCollapseExample&quot; text=&quot;Toggle second element&quot; /&gt;
+&lt;abp-button button-type=&quot;Primary&quot; abp-collapse-id=&quot;FirstCollapseExample SecondCollapseExample&quot; text=&quot;Toggle both elements&quot; /&gt;
+        
+&lt;abp-row class=&quot;mt-3&quot;&gt;
+    &lt;abp-column size-sm=&quot;_6&quot;&gt;
+        &lt;abp-collapse-body id=&quot;FirstCollapseExample&quot; multi=&quot;true&quot;&gt;
+                        3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+        &lt;/abp-collapse-body&gt;
+    &lt;/abp-column&gt;
+    &lt;abp-column size-sm=&quot;_6&quot;&gt;
+        &lt;abp-collapse-body id=&quot;SecondCollapseExample&quot; multi=&quot;true&quot;&gt;
+                    3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+        &lt;/abp-collapse-body&gt;
+    &lt;/abp-column&gt;
+&lt;/abp-row&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
 &lt;p&gt;
-   &lt;abp-collapse-button buton-type=&quot;Success&quot; body-id=&quot;collapseExample&quot;&gt;
+  &lt;a class=&quot;btn btn-primary&quot; data-toggle=&quot;collapse&quot; href=&quot;#multiCollapseExample1&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;multiCollapseExample1&quot;&gt;Toggle first element&lt;/a&gt;
-       Toggle
+  &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#multiCollapseExample2&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;multiCollapseExample2&quot;&gt;Toggle second element&lt;/button&gt;
-   &lt;/abp-collapse-button&gt;
+  &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.multi-collapse&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;multiCollapseExample1 multiCollapseExample2&quot;&gt;Toggle both elements&lt;/button&gt;
 &lt;/p&gt;
-        
+&lt;div class=&quot;row&quot;&gt;
-&lt;abp-collapse-body id=&quot;collapseExample&quot; show=&quot;true&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;
-   3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bir
+    &lt;div class=&quot;collapse multi-collapse&quot; id=&quot;multiCollapseExample1&quot;&gt;
-&lt;/abp-collapse-body&gt;
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-</pre>
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;
+    &lt;div class=&quot;collapse multi-collapse&quot; id=&quot;multiCollapseExample2&quot;&gt;
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Accordion example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-accordion>
+            <abp-accordion-item title="Collapsible Group Item #1">
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+            <abp-accordion-item title="Collapsible Group Item #2">
+                Anim pariatur cliche reprehenderit,, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+            <abp-accordion-item title="Collapsible Group Item #3">
+                Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+        </abp-accordion>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+
+&lt;abp-accordion&gt;
+    &lt;abp-accordion-item title=&quot;Collapsible Group Item #1&quot;&gt;
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+    &lt;/abp-accordion-item&gt;
+    &lt;abp-accordion-item title=&quot;Collapsible Group Item #2&quot;&gt;
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+    &lt;/abp-accordion-item&gt;
+    &lt;abp-accordion-item title=&quot;Collapsible Group Item #3&quot;&gt;
+                Anim pariatur  wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+    &lt;/abp-accordion-item&gt;
+&lt;/abp-accordion&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;accordion&quot; id=&quot;accordionExample&quot;&gt;
+  &lt;div class=&quot;card&quot;&gt;
+    &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
+      &lt;h5 class=&quot;mb-0&quot;&gt;
+        &lt;button class=&quot;btn btn-link&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
+          Collapsible Group Item #1
+        &lt;/button&gt;
+      &lt;/h5&gt;
+    &lt;/div&gt;
+
+    &lt;div id=&quot;collapseOne&quot; class=&quot;collapse show&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordionExample&quot;&gt;
+      &lt;div class=&quot;card-body&quot;&gt;
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;card&quot;&gt;
+    &lt;div class=&quot;card-header&quot; id=&quot;headingTwo&quot;&gt;
+      &lt;h5 class=&quot;mb-0&quot;&gt;
+        &lt;button class=&quot;btn btn-link collapsed&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseTwo&quot;&gt;
+          Collapsible Group Item #2
+        &lt;/button&gt;
+      &lt;/h5&gt;
+    &lt;/div&gt;
+    &lt;div id=&quot;collapseTwo&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingTwo&quot; data-parent=&quot;#accordionExample&quot;&gt;
+      &lt;div class=&quot;card-body&quot;&gt;
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;card&quot;&gt;
+    &lt;div class=&quot;card-header&quot; id=&quot;headingThree&quot;&gt;
+      &lt;h5 class=&quot;mb-0&quot;&gt;
+        &lt;button class=&quot;btn btn-link collapsed&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseThree&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseThree&quot;&gt;
+          Collapsible Group Item #3
+        &lt;/button&gt;
+      &lt;/h5&gt;
+    &lt;/div&gt;
+    &lt;div id=&quot;collapseThree&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingThree&quot; data-parent=&quot;#accordionExample&quot;&gt;
+      &lt;div class=&quot;card-body&quot;&gt;
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml

@@ -10,111 +10,750 @@
     </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>Dropdowns</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"> Bootstrap button</a>.</p>
 
-<h4># Dropdown Example</h4>
+<h4>Single button</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-dropdown>
+            <abp-dropdown-button text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button text=&quot;Dropdown button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Dropdown button
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; link=&quot;true&quot; text=&quot;Dropdown button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;a class=&quot;btn btn-secondary dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; id=&quot;dropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Dropdown link
+  &lt;/a&gt;
+
+  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuLink&quot;&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-dropdown>
-            <abp-dropdown-button button-type="Primary" text="Dropdown" />
+            <abp-dropdown-button button-type="Success" text="Dropdown button" />
             <abp-dropdown-menu>
-                <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
-                <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
-                <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Outline_Success" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Danger" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Outline_Danger" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                 <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;!-- Example single danger button --&gt;
+
 &lt;abp-dropdown&gt;
-    &lt;abp-dropdown-button button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
+    &lt;abp-dropdown-button button-type=&quot;Danger&quot; text=&quot;Dropdown button&quot; /&gt;
-       &lt;abp-dropdown-menu&gt;
+    &lt;abp-dropdown-menu&gt;
-       &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-divider /&gt;
-       &lt;abp-dropdown-divider/&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
     &lt;/abp-dropdown-menu&gt;
 &lt;/abp-dropdown&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;!-- Example single danger button --&gt;
+
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Action
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
+    &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Split Dropdown Example</h4>
+<h4>Split button</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-dropdown direction="Right">
+        <abp-dropdown>
-            <abp-dropdown-button dropdown-style="Split" button-type="Danger" text="Dropdown" />
+            <abp-dropdown-button button-type="Outline_Warning" dropdown-style="Split" text="Dropdown button" />
             <abp-dropdown-menu>
-                <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
-                <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
-                <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Warning" dropdown-style="Split" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Primary" dropdown-style="Split" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                 <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-dropdown direction=&quot;Right&quot;&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-dropdown-button dropdown-style=&quot;Split&quot; button-type=&quot;Danger&quot; text=&quot;Dropdown&quot;/&gt;
+                <pre><code>
-       &lt;abp-dropdown-menu&gt;
+&lt;!-- Example single danger button --&gt;
-       &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+
-       &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+    &lt;abp-dropdown-button button-type=&quot;Danger&quot; dropdown-style=&quot;Split&quot; text=&quot;Dropdown button&quot; /&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+    &lt;abp-dropdown-menu&gt;
-       &lt;abp-dropdown-divider/&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown-divider /&gt;
+&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
     &lt;/abp-dropdown-menu&gt;
 &lt;/abp-dropdown&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;!-- Example single danger button --&gt;
+
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
+    &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Link Dropdown Example</h4>
+
+<h4>Split button</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-dropdown direction="Up">
+        <abp-dropdown>
-            <abp-dropdown-button Link="true" button-type="Primary" text="Dropdown" />
+            <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
-            <abp-dropdown-menu align="Right">
+            <abp-dropdown-menu>
-                <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
-                <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
-                <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                 <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown>
+            <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;!-- Example single danger button --&gt;
+
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Large split button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Small split button&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;!-- Large button groups (default and split) --&gt;
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary btn-lg dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Large button
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary btn-lg&quot; type=&quot;button&quot;&gt;
+    Large split button
+  &lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
 
+&lt;!-- Small button groups (default and split) --&gt;
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary btn-sm dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Small button
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary btn-sm&quot; type=&quot;button&quot;&gt;
+    Small split button
+  &lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+
+<h4>Directions</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-dropdown direction="Up">
+            <abp-dropdown-button button-type="Secondary" text="Dropup" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown direction="Right">
+            <abp-dropdown-button button-type="Secondary" text="dropright" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+        <abp-dropdown direction="Right">
+            <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
+            <abp-dropdown-menu>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-dropdown direction=&quot;Up&quot;&gt;
-    &lt;abp-dropdown-button Link=&quot;true&quot; button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropup&quot; /&gt;
-       &lt;abp-dropdown-menu align=&quot;Right&quot;&gt;
+    &lt;abp-dropdown-menu&gt;
-       &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+        ...
-       &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+&lt;/abp-dropdown&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+&lt;abp-dropdown direction=&quot;Right&quot;&gt;
-       &lt;abp-dropdown-divider/&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;dropright&quot; /&gt;
-       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+&lt;abp-dropdown direction=&quot;Right&quot;&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Split right&quot; /&gt;
+    &lt;abp-dropdown-menu&gt;
+        ...
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group dropup&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Dropup
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;!-- Dropdown menu links --&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;btn-group dropright&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    dropright
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;!-- Dropdown menu links --&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;btn-group dropright&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;Split right&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;!-- Dropdown menu links --&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+
+<h4>Menu Items</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+            <abp-dropdown-menu>
+                <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
+                <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
+                <abp-dropdown-divider />
+                <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
+                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot;/&gt;
+    &lt;abp-dropdown-menu&gt;
+        &lt;abp-dropdown-header&gt;Dropdown Header&lt;/abp-dropdown-header&gt;
+        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-divider/&gt;
+        &lt;abp-dropdown-item-text&gt;Dropdown Item Text&lt;/abp-dropdown-item-text&gt;
+        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Dropdown button
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
+      &lt;h6 class=&quot;dropdown-header&quot;&gt;Dropdown Header&lt;/h6&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
+      &lt;a class=&quot;dropdown-item active&quot; href=&quot;#&quot;&gt;Active action&lt;/a&gt;
+      &lt;a class=&quot;dropdown-item disabled&quot; href=&quot;#&quot;&gt;Disabled action&lt;/a&gt;
+      &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+      &lt;span class=&quot;dropdown-item-text&quot;&gt;Dropdown item text&lt;/span&gt;
+      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+
+<h4>Menu alignment</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Secondary" text="Right-aligned" />
+            <abp-dropdown-menu align="Right">
+                <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
+                <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Right-aligned&quot;/&gt;
+    &lt;abp-dropdown-menu align=&quot;Right&quot;&gt;
+        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
     &lt;/abp-dropdown-menu&gt;
 &lt;/abp-dropdown&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Right-aligned
+  &lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
+    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Action&lt;/button&gt;
+    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Another action&lt;/button&gt;
+    &lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Something else here&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
+
+<h4>Custom Content</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-dropdown>
+            <abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
+            <abp-dropdown-menu class="p-4" style="max-width: 200px;">
+                <p>
+                    Some example text that's free-flowing within the dropdown menu.
+                </p>
+                <p class="mb-0">
+                    And this is more example text.
+                </p>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Only Text&quot; /&gt;
+    &lt;abp-dropdown-menu class=&quot;p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
+        &lt;p&gt;
+             Some example text that&apos;s free-flowing within the dropdown menu.
+        &lt;/p&gt;
+        &lt;p class=&quot;mb-0&quot;&gt;
+             And this is more example text.
+        &lt;/p&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
+    Dropdown With Only Text
+  &lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
+      &lt;p&gt;
+        Some example text that&apos;s free-flowing within the dropdown menu.
+      &lt;/p&gt;
+      &lt;p class=&quot;mb-0&quot;&gt;
+        And this is more example text.
+      &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-dropdown >
+            <abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
+            <abp-dropdown-menu>
+                <form class="px-4 py-3">
+                    <abp-input asp-for="EmailAddress"></abp-input>
+                    <abp-input asp-for="Password"></abp-input>
+                    <abp-input asp-for="RememberMe"></abp-input>
+                    <abp-button button-type="Primary" text="Sign In" type="submit" />
+                </form>
+                <abp-dropdown-divider></abp-dropdown-divider>
+                <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
+                <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Model Class">
+                <pre><code>
+    public class DropdownsModel : PageModel
+    {
+        [Required]
+        [DataType(DataType.EmailAddress)]
+        [Display(Name = "Email Address")]
+        public string EmailAddress { get; set; }
+
+        [Required]
+        [DataType(DataType.Password)]
+        [Display(Name = "Password")]
+        public string Password{ get; set; }
+
+        [Display(Name = "Remember Me")]
+        public bool RememberMe{ get; set; }
+
+
+        public void OnGet()
+        {
+
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-dropdown &gt;
+    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Form&quot;/&gt;
+    &lt;abp-dropdown-menu&gt;
+        &lt;form class=&quot;px-4 py-3&quot;&gt;
+            &lt;abp-input asp-for=&quot;EmailAddress&quot;&gt;&lt;/abp-input&gt;
+            &lt;abp-input asp-for=&quot;Password&quot;&gt;&lt;/abp-input&gt;
+            &lt;abp-input asp-for=&quot;RememberMe&quot;&gt;&lt;/abp-input&gt;
+            &lt;abp-button button-type=&quot;Primary&quot; text=&quot;Sign In&quot; type=&quot;submit&quot; /&gt;
+        &lt;/form&gt;
+        &lt;abp-dropdown-divider&gt;&lt;/abp-dropdown-divider&gt;
+        &lt;abp-dropdown-item href=&quot;#&quot;&gt;New around here? Sign up&lt;/abp-dropdown-item&gt;
+        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Forgot password?&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;btn-group&quot;&gt;
+    &lt;button class=&quot;dropdown-toggle btn btn-secondary&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown With Form&lt;/span&gt;&lt;/button&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div class=&quot;dropdown-menu&quot; x-placement=&quot;bottom-start&quot; style=&quot;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);&quot;&gt;
+        &lt;form class=&quot;px-4 py-3&quot; novalidate=&quot;novalidate&quot;&gt;
+            &lt;div class=&quot;form-group&quot;&gt;
+                &lt;label for=&quot;EmailAddress&quot;&gt;Email Address&lt;/label&gt;
+                &lt;input type=&quot;email&quot; data-val=&quot;true&quot; data-val-required=&quot;The Email Address field is required.&quot; id=&quot;EmailAddress&quot; name=&quot;EmailAddress&quot; value=&quot;&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;EmailAddress-error&quot;&gt;
+                &lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;EmailAddress-error&quot; class=&quot;&quot;&gt;The Email Address field is required.&lt;/span&gt;&lt;/span&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;form-group&quot;&gt;
+                &lt;label for=&quot;Password&quot;&gt;Password&lt;/label&gt;
+                &lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;Password&quot; name=&quot;Password&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;Password-error&quot;&gt;
+                &lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;Password-error&quot; class=&quot;&quot;&gt;The Password field is required.&lt;/span&gt;&lt;/span&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;form-check&quot;&gt;
+                &lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The Remember Me field is required.&quot; id=&quot;RememberMe&quot; name=&quot;RememberMe&quot; value=&quot;true&quot; class=&quot;form-check-input valid&quot; aria-describedby=&quot;RememberMe-error&quot;&gt;
+                &lt;label class=&quot;form-check-label&quot; for=&quot;RememberMe&quot;&gt;Remember Me&lt;/label&gt;
+            &lt;/div&gt;
+            &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Sign In&lt;/span&gt;&lt;/button&gt;
+            &lt;input name=&quot;RememberMe&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
+        &lt;/form&gt;
+        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;New around here? Sign up&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Forgot password?&lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
@@ -9,6 +10,20 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
 {
     public class DropdownsModel : PageModel
     {
+        [Required]
+        [DataType(DataType.EmailAddress)]
+        [Display(Name = "Email Address")]
+        public string EmailAddress { get; set; }
+
+        [Required]
+        [DataType(DataType.Password)]
+        [Display(Name = "Password")]
+        public string Password{ get; set; }
+
+        [Display(Name = "Remember Me")]
+        public bool RememberMe{ get; set; }
+
+
         public void OnGet()
         {
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml

@@ -12,166 +12,446 @@
     </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>Dynamic Forms</h2>
 
-<h4># Dynamic Form Example</h4>
+<h4>Dynamic Form Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-dynamic-form abp-model="@Model.PersonInput" />
+        <abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
-        <hr />
-        <h5>Posted Values:</h5>
-        <div>
-            Name: @Model.PersonInput.Name <br />
-            City: @Model.PersonInput.City <br />
-            Phone.Name: @Model.PersonInput.Phone.Name <br />
-            Phone.Number: @Model.PersonInput.Phone.Number <br />
-            Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
-            Country: @Model.PersonInput.Country <br />
-            IsActive: @Model.PersonInput.IsActive <br />
-        </div>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot;/&gt;
+            <abp-tab title="Model Class">
-</pre>
+                <pre><code>
-    </div>
+public class DynamicFormsModel : PageModel
-</div>
+    {
+        [BindProperty]
+        public DetailedModel MyDetailedModel { get; set; }
 
-<h4># Override an input Example</h4>
+        public List&lt;SelectListItem> CountryList { get; set; } = new List&lt;SelectListItem>
+        {
+            new SelectListItem { Value = "CA", Text = "Canada"},
+            new SelectListItem { Value = "US", Text = "USA"},
+            new SelectListItem { Value = "UK", Text = "United Kingdom"},
+            new SelectListItem { Value = "RU", Text = "Russia"}
+        };
 
-<div class="demo-with-code">
+        public void OnGet()
-    <div class="demo-area">
+        {
-        <abp-dynamic-form abp-model="@Model.PersonInput">
+                MyDetailedModel = new DetailedModel
-            <abp-input asp-for="@Model.PersonInput.Name" label="Overrided name" />
+                {
-            <abp-input asp-for="@Model.PersonInput.Phone.Number" label="Overrided number" />
+                    Name = "",
-            <abp-button button-type="Primary" type="submit" text="submit" />
+                    Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-        </abp-dynamic-form>
+                    IsActive = true,
-        <hr />
+                    Age = 65,
-        <h5>Posted Values:</h5>
+                    Day = DateTime.Now,
-        <div>
+                    MyCarType = CarType.Coupe,
-            Name: @Model.PersonInput.Name <br />
+                    YourCarType = CarType.Sedan,
-            Surname: @Model.PersonInput.Surname <br />
+                    Country = "RU",
-            City: @Model.PersonInput.City <br />
+                    NeighborCountries = new List&lt;string>() { "UK", "CA" }
-            Phone.Name: @Model.PersonInput.Phone.Name <br />
+                };
-            Phone.Number: @Model.PersonInput.Phone.Number <br />
+        }
-            Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
+
-            Country: @Model.PersonInput.Country <br />
+        public class DetailedModel
-            IsActive: @Model.PersonInput.IsActive <br />
+        {
-        </div>
+            [Required]
-    </div>
+            [Placeholder("Enter your name...")]
-    <div class="code-area">
+            [Display(Name = "Name")]
-        <pre>
+            public string Name { get; set; }
-&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot;&gt;
+            
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Name&quot; label=&quot;Overrided name&quot; /&gt;
+            [TextArea(Rows = 4)]
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot; label=&quot;Overrided number&quot; /&gt;
+            [Display(Name = "Description")]
-    &lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;submit&quot; /&gt;
+            [InputInfoText("Describe Yourself")]
-&lt;/abp-dynamic-form&gt;
+            public string Description { get; set; }
-</pre>
+
+            [Required]
+            [DataType(DataType.Password)]
+            [Display(Name = "Password")]
+            public string Password { get; set; }
+
+            [Display(Name = "Is Active")]
+            public bool IsActive { get; set; }
+
+            [Required]
+            [Display(Name = "Age")]
+            public int Age { get; set; }
+
+            [Required]
+            [Display(Name = "My Car Type")]
+            public CarType MyCarType { get; set; }
+
+            [Required]
+            [AbpRadioButton(Inline = true)]
+            [Display(Name = "Your Car Type")]
+            public CarType YourCarType { get; set; }
+
+            [DataType(DataType.Date)]
+            [Display(Name = "Day")]
+            public DateTime Day { get; set; }
+            
+            [SelectItems(nameof(CountryList))]
+            [Display(Name = "Country")]
+            public string Country { get; set; }
+            
+            [SelectItems(nameof(CountryList))]
+            [Display(Name = "Neighbor Countries")]
+            public List&lt;string> NeighborCountries { get; set; }
+        }
+
+        public enum CarType
+        {
+            Sedan,
+            Hatchback,
+            StationWagon,
+            Coupe
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-dynamic-form abp-model=&quot;@@Model.MyDetailedModel&quot; submit-button=&quot;true&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;form method=&quot;post&quot; novalidate=&quot;novalidate&quot;&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Name&quot;&gt;Name&lt;/label&gt;
+        &lt;input type=&quot;text&quot; data-val=&quot;true&quot; data-val-required=&quot;The Name field is required.&quot; id=&quot;MyDetailedModel_Name&quot; name=&quot;MyDetailedModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot; placeholder=&quot;Enter your name...&quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Description&quot;&gt;Description&lt;/label&gt;
+        &lt;textarea id=&quot;MyDetailedModel_Description&quot; name=&quot;MyDetailedModel.Description&quot; rows=&quot;4&quot; class=&quot;form-control &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/textarea&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Description&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Password&quot;&gt;Password&lt;/label&gt;
+        &lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;MyDetailedModel_Password&quot; name=&quot;MyDetailedModel.Password&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-check&quot;&gt;
+        &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; data-val=&quot;true&quot; data-val-required=&quot;The Is Active field is required.&quot; id=&quot;MyDetailedModel_IsActive&quot; name=&quot;MyDetailedModel.IsActive&quot; value=&quot;true&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyDetailedModel.IsActive&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
+        &lt;label class=&quot;form-check-label&quot; for=&quot;MyDetailedModel_IsActive&quot;&gt;Is Active&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Age&quot;&gt;Age&lt;/label&gt;
+        &lt;input type=&quot;number&quot; data-val=&quot;true&quot; data-val-required=&quot;The Age field is required.&quot; id=&quot;MyDetailedModel_Age&quot; name=&quot;MyDetailedModel.Age&quot; value=&quot;65&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Age&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_MyCarType&quot;&gt;My Car Type&lt;/label&gt;
+        &lt;select data-val=&quot;true&quot; data-val-required=&quot;The My Car Type field is required.&quot; id=&quot;MyDetailedModel_MyCarType&quot; name=&quot;MyDetailedModel.MyCarType&quot; class=&quot;form-control valid&quot; aria-describedby=&quot;MyDetailedModel_MyCarType-error&quot; aria-invalid=&quot;false&quot;&gt;
+            &lt;option value=&quot;0&quot;&gt;Sedan&lt;/option&gt;
+            &lt;option value=&quot;1&quot;&gt;Hatchback&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;StationWagon&lt;/option&gt;
+            &lt;option selected=&quot;selected&quot; value=&quot;3&quot;&gt;Coupe&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio0&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;0&quot; checked=&quot;checked&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio0&quot;&gt;Sedan&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio1&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;1&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio1&quot;&gt;Hatchback&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio2&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;2&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio2&quot;&gt;StationWagon&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio3&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;3&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio3&quot;&gt;Coupe&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Day&quot;&gt;Day&lt;/label&gt;
+        &lt;input type=&quot;date&quot; data-val=&quot;true&quot; data-val-required=&quot;The Day field is required.&quot; id=&quot;MyDetailedModel_Day&quot; name=&quot;MyDetailedModel.Day&quot; value=&quot;2018-12-19&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Day&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_Country&quot;&gt;Country&lt;/label&gt;
+        &lt;select id=&quot;MyDetailedModel_Country&quot; name=&quot;MyDetailedModel.Country&quot; class=&quot;form-control&quot;&gt;
+            &lt;option value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
+            &lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
+            &lt;option value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
+            &lt;option selected=&quot;selected&quot; value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyDetailedModel_NeighborCountries&quot;&gt;Neighbor Countries&lt;/label&gt;
+        &lt;select id=&quot;MyDetailedModel_NeighborCountries&quot; multiple=&quot;multiple&quot; name=&quot;MyDetailedModel.NeighborCountries&quot; class=&quot;form-control&quot;&gt;
+            &lt;option selected=&quot;selected&quot; value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
+            &lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
+            &lt;option selected=&quot;selected&quot; value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
+            &lt;option value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    &lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuTDS8evmWgc2dNZYWkzjZ1xFcA9ptyCgQBCTgA9NMoh_FXGRBDVunA7fx0TF1df1_OxaxerJvuWRCwFBhy8KbPcgXrVtmtSp6Z28gpFpO0Z1TSO1pdgdTwEXj43DBWq0Hc&quot;&gt;
+    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
+&lt;/form&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Form with Button Example</h4>
+<h4>Order Attribute Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-dynamic-form abp-model="@Model.PersonInput.Phone" submit-button="true" />
+        <abp-dynamic-form abp-model="@Model.MyOrderExampleModel"/>
-        <hr />
-        <h5>Posted Values:</h5>
-        <div>
-            Name: @Model.PersonInput.Name <br />
-            Surname: @Model.PersonInput.Surname <br />
-            City: @Model.PersonInput.City <br />
-            Phone.Name: @Model.PersonInput.Phone.Name <br />
-            Phone.Number: @Model.PersonInput.Phone.Number <br />
-            Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
-            Country: @Model.PersonInput.Country <br />
-            IsActive: @Model.PersonInput.IsActive <br />
-        </div>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot; submit-button=&quot;true&quot;/&gt;
+            <abp-tab title="Model Class" active="true">
-</pre>
+                <pre><code>
+public class DynamicFormsModel : PageModel
+    {
+        public OrderExampleModel MyOrderExampleModel { get; set; }
+
+        public void OnGet()
+        {
+            MyOrderExampleModel = new OrderExampleModel();
+        }
+
+        public class OrderExampleModel
+        {
+            [DisplayOrder(10005)]
+            public string Surname{ get; set; }
+
+            //Default 10000
+            public string EmailAddress { get; set; }
+
+            [DisplayOrder(10003)]
+            public string Name { get; set; }
+
+            [DisplayOrder(9999)]
+            public string City { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+    &lt;abp-dynamic-form abp-model=&quot;Model.MyOrderExampleModel&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;form method=&quot;post&quot;&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyOrderExampleModel_City&quot;&gt;City&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_City&quot; name=&quot;MyOrderExampleModel.City&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.City&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyOrderExampleModel_EmailAddress&quot;&gt;EmailAddress&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_EmailAddress&quot; name=&quot;MyOrderExampleModel.EmailAddress&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyOrderExampleModel_Name&quot;&gt;Name&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Name&quot; name=&quot;MyOrderExampleModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyOrderExampleModel_Surname&quot;&gt;Surname&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Surname&quot; name=&quot;MyOrderExampleModel.Surname&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Surname&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuQICDXiCEgWpOHc7uIzSQ2dKiezdDkWplt2D8XLsCX39Z8B_GnplHrAfZgZ5GkNZN-tkEgKlMtyjoWv9MADyYb2MmWw-LuW8wfUXI9YSza5lo_8P03Vff4NxmrV3boG0xQ&quot;&gt;
+&lt;/form&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Non-dynamic Form </h4>
+<h4>Attribute Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <form method="post">
+        <abp-dynamic-form abp-model="@Model.MyAttributeExamplesModel"/>
-            <abp-input asp-for="@Model.PersonInput.Name" />
-            <abp-input asp-for="@Model.PersonInput.Surname" />
-            <abp-input asp-for="@Model.PersonInput.Age" />
-            <abp-input asp-for="@Model.PersonInput.IsActive" />
-            <abp-input asp-for="@Model.PersonInput.Day" />
-            <abp-select asp-for="@Model.PersonInput.City" />
-            <abp-radio asp-for="@Model.PersonInput.Country" />
-            <abp-input asp-for="@Model.PersonInput.Phone.Number" />
-            <abp-input asp-for="@Model.PersonInput.Phone.Name" />
-            <abp-button type="submit" button-type="Primary" text="Submit" />
-        </form>
-        <hr />
-        <h5>Posted Values:</h5>
-        <div>
-            Name: @Model.PersonInput.Name <br />
-            Surname: @Model.PersonInput.Surname <br />
-            Age: @Model.PersonInput.Age <br />
-            Is Active: @Model.PersonInput.IsActive <br />
-            Day: @Model.PersonInput.Day <br />
-            City: @Model.PersonInput.City <br />
-            Country: @Model.PersonInput.Country <br />
-            Phone.Number: @Model.PersonInput.Phone.Number <br />
-            Phone.Name: @Model.PersonInput.Phone.Name <br />
-        </div>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Model Class" active="true">
+                <pre><code>
+public class DynamicFormsModel : PageModel
+    {
+        public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
+
+        public void OnGet()
+        {
+            MyAttributeExamplesModel = new AttributeExamplesModel();
+            MyAttributeExamplesModel.DisabledInput = "Disabled Input";
+            MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
+            MyAttributeExamplesModel.ReadonlyPlainTextInput = "Readonly Plain Text Input";
+            MyAttributeExamplesModel.LargeInput = "Large Input";
+            MyAttributeExamplesModel.SmallInput = "Small Input";
+        }
+
+        public class AttributeExamplesModel
+        {
+            [HiddenInput]
+            public string HiddenInput { get; set; }
+
+            [DisabledInput]
+            public string DisabledInput{ get; set; }
+
+            [ReadOnlyInput]
+            public string ReadonlyInput { get; set; }
+
+            [ReadOnlyInput(PlainText = true)]
+            public string ReadonlyPlainTextInput { get; set; }
+
+            [FormControlSize(AbpFormControlSize.Large)]
+            public string LargeInput { get; set; }
+
+            [FormControlSize(AbpFormControlSize.Small)]
+            public string SmallInput { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+    &lt;abp-dynamic-form abp-model=&quot;Model.MyAttributeExamplesModel&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
 &lt;form method=&quot;post&quot;&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Name&quot; /&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Surname&quot; /&gt;
+        &lt;input type=&quot;hidden&quot; id=&quot;MyAttributeExamplesModel_HiddenInput&quot; name=&quot;MyAttributeExamplesModel.HiddenInput&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Age&quot; /&gt;
+    &lt;/div&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.IsActive&quot; /&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Day&quot; /&gt;
+        &lt;label for=&quot;MyAttributeExamplesModel_DisabledInput&quot;&gt;DisabledInput&lt;/label&gt;
-    &lt;abp-select asp-for=&quot;Model.PersonInput.City&quot; /&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_DisabledInput&quot; name=&quot;MyAttributeExamplesModel.DisabledInput&quot; value=&quot;Disabled Input&quot; disabled=&quot;&quot; class=&quot;form-control &quot;&gt;
-    &lt;abp-select asp-for=&quot;Model.PersonInput.Country&quot; /&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.DisabledInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot; /&gt;
+    &lt;/div&gt;
-    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Name&quot; /&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
-    &lt;abp-button type=&quot;submit&quot; button-type=&quot;Primary&quot; text=&quot;Submit&quot; /&gt;
+        &lt;label for=&quot;MyAttributeExamplesModel_ReadonlyInput&quot;&gt;ReadonlyInput&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; value=&quot;Readonly Input&quot; class=&quot;form-control &quot; readonly=&quot;&quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot;&gt;ReadonlyPlainTextInput&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; value=&quot;Readonly Plain Text Input&quot; class=&quot;form-control-plaintext &quot; readonly=&quot;&quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyAttributeExamplesModel_LargeInput&quot;&gt;LargeInput&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_LargeInput&quot; name=&quot;MyAttributeExamplesModel.LargeInput&quot; value=&quot;Large Input&quot; class=&quot;form-control form-control-lg&quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.LargeInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyAttributeExamplesModel_SmallInput&quot;&gt;SmallInput&lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_SmallInput&quot; name=&quot;MyAttributeExamplesModel.SmallInput&quot; value=&quot;Small Input&quot; class=&quot;form-control form-control-sm&quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.SmallInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuSUKLRRJ2JhujqxKEZfzYxIDYQtg1knqOh9zyG1DjaXRnoavm1876JtbePc4El_6aDqwMUKuXshQhXIunS_hrygXH5v-Tm6Qw_zL-JEJnSmd6Q4EwCtwDBwGX0in4-swG8&quot;&gt;
 &lt;/form&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Form Content Placement </h4>
+<h4>Form Content Placement</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-dynamic-form abp-model="@Model.PersonInput">
+        <abp-dynamic-form abp-model="@Model.MyFormContentExampleModel">
+            <div>
+                First Div! <br />
+                ---------
+            </div>
+
             <abp-form-content />
-            <abp-button button-type="Primary" type="submit" text="submit" />
+
+            <div>
+                ---------  <br />
+                Second Div!
+            </div>
         </abp-dynamic-form>
-        <hr />
-        <h5>Posted Values:</h5>
-        <div>
-            Name: @Model.PersonInput.Name <br />
-            Name: @Model.PersonInput.Surname <br />
-            City: @Model.PersonInput.City <br />
-            Phone.Name: @Model.PersonInput.Phone.Name <br />
-            Phone.Number: @Model.PersonInput.Phone.Number <br />
-            Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
-            Country: @Model.PersonInput.Country <br />
-            IsActive: @Model.PersonInput.IsActive <br />
-        </div>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-dynamic-form abp-model=&quot;@Model.PersonInput&quot;&gt;
+            <abp-tab title="Model Class">
-     &lt;abp-form-content /&gt;
+                <pre><code>
-     &lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;submit&quot; /&gt;
+public class DynamicFormsModel : PageModel
+    {
+        public FormContentExampleModel MyFormContentExampleModel { get; set; }
+
+        public void OnGet()
+        {
+            MyFormContentExampleModel = new FormContentExampleModel();
+        }
+
+        public class FormContentExampleModel
+        {
+            public string SampleInput { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-dynamic-form abp-model=&quot;@@Model.MyFormContentExampleModel&quot;&gt;
+    &lt;div&gt;
+        First Div!  &lt;br /&gt;
+        ---------
+    &lt;/div&gt;
+
+    &lt;abp-form-content /&gt;
+
+    &lt;div&gt;
+        ---------  &lt;br /&gt;
+        Second Div!
+    &lt;/div&gt;
 &lt;/abp-dynamic-form&gt;
-</pre>
+</code></pre>
-    </div>
+            </abp-tab>
-</div>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;form method=&quot;post&quot;&gt;
+    &lt;div&gt;
+        First Div!  &lt;br /&gt;
+        ---------
+    &lt;/div&gt;
+
+    &lt;div&gt;
+        &lt;div class=&quot;form-group&quot;&gt;
+            &lt;label for=&quot;MyFormContentExampleModel_SampleInput&quot;&gt;SampleInput&lt;/label&gt;
+            &lt;input type=&quot;text&quot; id=&quot;MyFormContentExampleModel_SampleInput&quot; name=&quot;MyFormContentExampleModel.SampleInput&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+            &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyFormContentExampleModel.SampleInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
 
+    &lt;div&gt;
+        ---------  &lt;br /&gt;
+        Second Div!
+    &lt;/div&gt;
+    &lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuS4l6PkkSnj6NFFQcJPBjnUn13wQKxp0lm1Dw84zvR-1QrE4byCemr2_qENxB-Ob_YEc6yw3bvQcqN6VQ0ZPN4Sv6DvX5okAWE52wRXmNcHlTliFOPdjLcKcv3qBFXXlVk&quot;&gt;
+&lt;/form&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs

@@ -12,9 +12,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
     public class DynamicFormsModel : PageModel
     {
         [BindProperty]
-        public PersonModel PersonInput { get; set; }
+        public DetailedModel MyDetailedModel { get; set; }
 
-        public List<SelectListItem> Countries { get; set; } = new List<SelectListItem>
+        public OrderExampleModel MyOrderExampleModel { get; set; }
+
+        public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
+
+        public FormContentExampleModel MyFormContentExampleModel { get; set; }
+
+        public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
         {
             new SelectListItem { Value = "CA", Text = "Canada"},
             new SelectListItem { Value = "US", Text = "USA"},
@@ -24,72 +30,127 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
 
         public void OnGet()
         {
-            if (PersonInput == null)
+                MyDetailedModel = new DetailedModel
-            {
-                PersonInput = new PersonModel
                 {
-                    Name = "John",
+                    Name = "",
+                    Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                    IsActive = true,
                     Age = 65,
-                    Country = "CA",
                     Day = DateTime.Now,
-                    City = Cities.NewJersey,
+                    MyCarType = CarType.Coupe,
-                    Phone = new PhoneModel { Number = "326346231", Name = "MyPhone" }
+                    YourCarType = CarType.Sedan,
+                    Country = "RU",
+                    NeighborCountries = new List<string>() { "UK", "CA" }
                 };
-            }
+
+            MyFormContentExampleModel = new FormContentExampleModel();
+
+            MyOrderExampleModel = new OrderExampleModel();
+
+            MyAttributeExamplesModel = new AttributeExamplesModel
+            {
+                DisabledInput = "Disabled Input",
+                ReadonlyInput = "Readonly Input",
+                ReadonlyPlainTextInput = "Readonly Plain Text Input",
+                LargeInput = "Large Input",
+                SmallInput = "Small Input"
+            };
+
         }
 
-        public void OnPost()
+        public class FormContentExampleModel
         {
+            public string SampleInput { get; set; }
+        }
+
+        public class AttributeExamplesModel
+        {
+            [HiddenInput]
+            public string HiddenInput { get; set; }
+
+            [DisabledInput]
+            public string DisabledInput{ get; set; }
+
+            [ReadOnlyInput]
+            public string ReadonlyInput { get; set; }
+
+            [ReadOnlyInput(PlainText = true)]
+            public string ReadonlyPlainTextInput { get; set; }
+
+            [FormControlSize(AbpFormControlSize.Large)]
+            public string LargeInput { get; set; }
+
+            [FormControlSize(AbpFormControlSize.Small)]
+            public string SmallInput { get; set; }
+        }
+
+        public class OrderExampleModel
+        {
+            [DisplayOrder(10005)]
+            public string Surname{ get; set; }
+
+            //Default 10000
+            public string EmailAddress { get; set; }
 
+            [DisplayOrder(10003)]
+            public string Name { get; set; }
+
+            [DisplayOrder(9999)]
+            public string City { get; set; }
         }
 
-        public class PersonModel
+        public class DetailedModel
         {
             [Required]
+            [Placeholder("Enter your name...")]
+            [Display(Name = "Name")]
             public string Name { get; set; }
             
             [TextArea(Rows = 4)]
-            public string Surname { get; set; }
+            [Display(Name = "Description")]
+            [InputInfoText("Describe Yourself")]
+            public string Description { get; set; }
 
             [Required]
-            [Range(1, 100)]
+            [DataType(DataType.Password)]
+            [Display(Name = "Password")]
+            public string Password { get; set; }
+
+            [Display(Name = "Is Active")]
+            public bool IsActive { get; set; }
+
+            [Required]
+            [Display(Name = "Age")]
             public int Age { get; set; }
 
             [Required]
-            public Cities City { get; set; }
+            [Display(Name = "My Car Type")]
+            public CarType MyCarType { get; set; }
 
-            public PhoneModel Phone { get; set; }
+            [Required]
+            [AbpRadioButton(Inline = true)]
+            [Display(Name = "Your Car Type")]
+            public CarType YourCarType { get; set; }
 
             [DataType(DataType.Date)]
-            [DisplayOrder(10003)]
+            [Display(Name = "Day")]
             public DateTime Day { get; set; }
             
-            public bool IsActive { get; set; }
+            [SelectItems(nameof(CountryList))]
-            
+            [Display(Name = "Country")]
-            [AbpRadioButton(Inline = true)]
-            [SelectItems(nameof(Countries))]
             public string Country { get; set; }
+            
+            [SelectItems(nameof(CountryList))]
+            [Display(Name = "Neighbor Countries")]
+            public List<string> NeighborCountries { get; set; }
         }
 
-        public class PhoneModel
+        public enum CarType
-        {
-            [Required]
-            [DisplayOrder(10002)]
-            public string Number { get; set; }
-
-            [Required]
-            [DisplayOrder(10001)]
-            [DisplayName("PhoneName")]
-            public string Name { get; set; }
-        }
-
-        public enum Cities
         {
-            NewJersey,
+            Sedan,
-            Moscow,
+            Hatchback,
-            Istanbul,
+            StationWagon,
-            London,
+            Coupe
-            Beijing
         }
     }
 }

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml

@@ -0,0 +1,465 @@
+@page
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+@model FormElementsModel
+
+@{
+    ViewData["Title"] = "Form Elements";
+}
+
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </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>Form Elements</h2>
+
+<h4>Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-input asp-for="@Model.MyModel.Name" label="Name"/>
+        <abp-input asp-for="@Model.MyModel.Password" label="Password" />
+        <abp-input asp-for="@Model.MyModel.CheckMeOut" label="Check Me Out" />
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            [Required]
+            public string Name { get; set; }
+
+            [Required]
+            [DataType(DataType.Password)]
+            public string Password { get; set; }
+
+            public bool CheckMeOut { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-input asp-for=&quot;@@Model.MyModel.Name&quot; label=&quot;Name&quot;/&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.Password&quot; label=&quot;Password&quot; /&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.CheckMeOut&quot; label=&quot;Check Me Out&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;form-group&quot;&gt;
+&lt;label for=&quot;MyModel_Name&quot;&gt;Name&lt;/label&gt;
+&lt;input type=&quot;text&quot; data-val=&quot;true&quot; data-val-required=&quot;The Name field is required.&quot; id=&quot;MyModel_Name&quot; name=&quot;MyModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-group&quot;&gt;
+&lt;label for=&quot;MyModel_Password&quot;&gt;Password&lt;/label&gt;
+&lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;MyModel_Password&quot; name=&quot;MyModel.Password&quot; class=&quot;form-control &quot;&gt;
+&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-check&quot;&gt;
+&lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The CheckMeOut field is required.&quot; id=&quot;MyModel_CheckMeOut&quot; name=&quot;MyModel.CheckMeOut&quot; value=&quot;true&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyModel.CheckMeOut&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
+&lt;label class=&quot;form-check-label&quot; for=&quot;MyModel_CheckMeOut&quot;&gt;Check Me Out&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Form controls</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-input asp-for="@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
+        <abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList" label="City" />
+        <abp-select asp-for="@Model.MyModel.Cities" asp-items="@Model.CityList" label="Cities" />
+        <abp-input asp-for="@Model.MyModel.Description" label="Description" />
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+                    
+        public List&lt;SelectListItem&gt; CityList { get; set; } = new List&lt;SelectListItem&gt;
+        {
+            new SelectListItem { Value = "NY", Text = "New York"},
+            new SelectListItem { Value = "LDN", Text = "London"},
+            new SelectListItem { Value = "IST", Text = "Istanbul"},
+            new SelectListItem { Value = "MOS", Text = "Moscow"}
+        };
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            [Required]
+            public string EmailAddress { get; set; }
+
+            public string City { get; set; }
+
+            public List&lt;string&gt; Cities { get; set; }
+
+            [TextArea]
+            public string Description { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-input asp-for=&quot;@@Model.MyModel.EmailAddress&quot; label=&quot;Email Address&quot; placeholder=&quot;name@example.com&quot; /&gt;
+&lt;abp-select asp-for=&quot;@@Model.MyModel.City&quot; asp-items=&quot;@@Model.CityList&quot; label=&quot;City&quot; /&gt;
+&lt;abp-select asp-for=&quot;@@Model.MyModel.Cities&quot; asp-items=&quot;@@Model.CityList&quot; label=&quot;Cities&quot; /&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.Description&quot; label=&quot;Description&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyModel_EmailAddress&quot;&gt;Email Address&lt;/label&gt;
+        &lt;input placeholder=&quot;name@example.com&quot; type=&quot;text&quot; data-val=&quot;true&quot; data-val-required=&quot;The EmailAddress field is required.&quot; id=&quot;MyModel_EmailAddress&quot; name=&quot;MyModel.EmailAddress&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyModel_City&quot;&gt;City&lt;/label&gt;
+        &lt;select id=&quot;MyModel_City&quot; name=&quot;MyModel.City&quot; class=&quot;form-control&quot;&gt;
+            &lt;option value=&quot;NY&quot;&gt;New York&lt;/option&gt;
+            &lt;option value=&quot;LDN&quot;&gt;London&lt;/option&gt;
+            &lt;option value=&quot;IST&quot;&gt;Istanbul&lt;/option&gt;
+            &lt;option value=&quot;MOS&quot;&gt;Moscow&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyModel_Cities&quot;&gt;Cities&lt;/label&gt;
+        &lt;select id=&quot;MyModel_Cities&quot; multiple=&quot;multiple&quot; name=&quot;MyModel.Cities&quot; class=&quot;form-control&quot;&gt;
+            &lt;option value=&quot;NY&quot;&gt;New York&lt;/option&gt;
+            &lt;option value=&quot;LDN&quot;&gt;London&lt;/option&gt;
+            &lt;option value=&quot;IST&quot;&gt;Istanbul&lt;/option&gt;
+            &lt;option value=&quot;MOS&quot;&gt;Moscow&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;MyModel_Description&quot;&gt;Description&lt;/label&gt;
+        &lt;textarea id=&quot;MyModel_Description&quot; name=&quot;MyModel.Description&quot; class=&quot;form-control &quot;&gt;&lt;/textarea&gt;
+        &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.Description&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Sizing</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-input asp-for="@Model.MyModel.LargeInput" size="Large" />
+        <abp-input asp-for="@Model.MyModel.SmallInput" size="Small" />
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public string LargeInput { get; set; }
+
+            public string SmallInput { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-input asp-for=&quot;@@Model.MyModel.LargeInput&quot; size=&quot;Large&quot; /&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.SmallInput&quot; size=&quot;Small&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;MyModel_LargeInput&quot;&gt;LargeInput&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;MyModel_LargeInput&quot; name=&quot;MyModel.LargeInput&quot; value=&quot;&quot; class=&quot;form-control form-control-lg&quot;&gt;
+    &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.LargeInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;MyModel_SmallInput&quot;&gt;SmallInput&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;MyModel_SmallInput&quot; name=&quot;MyModel.SmallInput&quot; value=&quot;&quot; class=&quot;form-control form-control-sm&quot;&gt;
+    &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.SmallInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Disabled And ReadOnly</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-input asp-for="@Model.MyModel.SampleInput0" disabled="true" />
+        <abp-input asp-for="@Model.MyModel.SampleInput1" readonly="True" />
+        <abp-input asp-for="@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+            MyModel.SampleInput0 = "This is a disabled input.";
+            MyModel.SampleInput0 = "This is a disabled input.";
+            MyModel.SampleInput1 = "This is a readonly input.";
+            MyModel.SampleInput2 = "This is a readonly plain-text.";
+        }
+
+        public class SampleModel
+        {
+            public string SampleInput0 { get; set; }
+                    
+            public string SampleInput1 { get; set; }
+
+            public string SampleInput2 { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-input asp-for=&quot;@@Model.MyModel.SampleInput0&quot; disabled=&quot;true&quot; /&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.SampleInput1&quot; readonly=&quot;True&quot; /&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.SampleInput2&quot; readonly=&quot;True_PlainText&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;MyModel_SampleInput0&quot;&gt;SampleInput0&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;MyModel_SampleInput0&quot; name=&quot;MyModel.SampleInput0&quot; value=&quot;This is a disabled input.&quot; disabled=&quot;&quot; class=&quot;form-control &quot;&gt;
+    &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.SampleInput0&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;MyModel_SampleInput1&quot;&gt;SampleInput1&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;MyModel_SampleInput1&quot; name=&quot;MyModel.SampleInput1&quot; value=&quot;This is a readonly input.&quot; class=&quot;form-control &quot; readonly=&quot;&quot;&gt;
+    &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.SampleInput1&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;MyModel_SampleInput2&quot;&gt;SampleInput2&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;MyModel_SampleInput2&quot; name=&quot;MyModel.SampleInput2&quot; value=&quot;This is a readonly plain-text.&quot; class=&quot;form-control-plaintext &quot; readonly=&quot;&quot;&gt;
+    &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyModel.SampleInput2&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Checkboxes and radios</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-input asp-for="@Model.MyModel.DefaultCheckbox"/>
+        <abp-input asp-for="@Model.MyModel.DisabledCheckbox" disabled="true"/>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public bool DefaultCheckbox { get; set; }
+
+            public bool DisabledCheckbox { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-input asp-for=&quot;@@Model.MyModel.DefaultCheckbox&quot;/&gt;
+&lt;abp-input asp-for=&quot;@@Model.MyModel.DisabledCheckbox&quot; disabled=&quot;true&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;form-check&quot;&gt;
+    &lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The DefaultCheckbox field is required.&quot; id=&quot;MyModel_DefaultCheckbox&quot; name=&quot;MyModel.DefaultCheckbox&quot; value=&quot;true&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyModel.DefaultCheckbox&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
+    &lt;label class=&quot;form-check-label&quot; for=&quot;MyModel_DefaultCheckbox&quot;&gt;DefaultCheckbox&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class=&quot;form-check&quot;&gt;
+    &lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The DisabledCheckbox field is required.&quot; id=&quot;MyModel_DisabledCheckbox&quot; name=&quot;MyModel.DisabledCheckbox&quot; value=&quot;true&quot; disabled=&quot;&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyModel.DisabledCheckbox&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
+    &lt;label class=&quot;form-check-label&quot; for=&quot;MyModel_DisabledCheckbox&quot;&gt;DisabledCheckbox&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+            MyModel.CityRadio = "IST";
+        }
+
+        public class SampleModel
+        {
+            [Display(Name="City")]
+            public string CityRadio { get; set; }
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-radio asp-for=&quot;@@Model.MyModel.CityRadio&quot; asp-items=&quot;@@Model.CityList&quot; inline=&quot;true&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioNY&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;NY&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioNY&quot;&gt;New York&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioLDN&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;LDN&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioLDN&quot;&gt;London&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioIST&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;IST&quot; checked=&quot;checked&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioIST&quot;&gt;Istanbul&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
+        &lt;input type=&quot;radio&quot; id=&quot;MyModel.CityRadioRadioMOS&quot; name=&quot;MyModel.CityRadio&quot; value=&quot;MOS&quot; class=&quot;custom-control-input&quot;&gt;
+        &lt;label class=&quot;custom-control-label&quot; for=&quot;MyModel.CityRadioRadioMOS&quot;&gt;Moscow&lt;/label&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Enum</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-select asp-for="@Model.MyModel.CarType"/>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public CarType CarType { get; set; }
+        }
+
+        public enum CarType
+        {
+            Sedan,
+            Hatchback,
+            StationWagon,
+            Coupe
+        }
+    }
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-select asp-for=&quot;@Model.MyModel.CarType&quot;/&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+ &lt;div class=&quot;form-group&quot;&gt;
+     &lt;label for=&quot;MyModel_CarType&quot;&gt;CarType&lt;/label&gt;
+     &lt;select data-val=&quot;true&quot; data-val-required=&quot;The CarType field is required.&quot; id=&quot;MyModel_CarType&quot; name=&quot;MyModel.CarType&quot; class=&quot;form-control&quot;&gt;
+         &lt;option selected=&quot;selected&quot; value=&quot;0&quot;&gt;Sedan&lt;/option&gt;
+         &lt;option value=&quot;1&quot;&gt;Hatchback&lt;/option&gt;
+         &lt;option value=&quot;2&quot;&gt;StationWagon&lt;/option&gt;
+         &lt;option value=&quot;3&quot;&gt;Coupe&lt;/option&gt;
+     &lt;/select&gt;
+ &lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs

@@ -0,0 +1,81 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class FormElementsModel : PageModel
+    {
+        [BindProperty]
+        public SampleModel MyModel { get; set; }
+
+        public List<SelectListItem> CityList { get; set; } = new List<SelectListItem>
+        {
+            new SelectListItem { Value = "NY", Text = "New York"},
+            new SelectListItem { Value = "LDN", Text = "London"},
+            new SelectListItem { Value = "IST", Text = "Istanbul"},
+            new SelectListItem { Value = "MOS", Text = "Moscow"}
+        };
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+            MyModel.SampleInput0 = "This is a disabled input.";
+            MyModel.SampleInput1 = "This is a readonly input.";
+            MyModel.SampleInput2 = "This is a readonly plain-text.";
+            MyModel.CityRadio = "IST";
+        }
+
+        public class SampleModel
+        {
+            public string Name { get; set; }
+
+            public string SampleInput0 { get; set; }
+
+            public string SampleInput1 { get; set; }
+
+            public string SampleInput2 { get; set; }
+
+            public string LargeInput { get; set; }
+
+            public string SmallInput { get; set; }
+
+            [TextArea]
+            public string Description { get; set; }
+
+            public string EmailAddress { get; set; }
+            
+            [Required]
+            [DataType(DataType.Password)]
+            public string Password { get; set; }
+
+            public bool CheckMeOut { get; set; }
+
+            public bool DefaultCheckbox { get; set; }
+
+            public bool DisabledCheckbox { get; set; }
+
+            public CarType CarType { get; set; }
+
+            public string City { get; set; }
+
+            [Display(Name="City")]
+            public string CityRadio { get; set; }
+
+            public List<string> Cities { get; set; }
+        }
+
+        public enum CarType
+        {
+            Sedan,
+            Hatchback,
+            StationWagon,
+            Coupe
+        }
+    }
+}

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml

@@ -1,54 +0,0 @@
-@page
-@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ImagesModel
-@{
-    ViewData["Title"] = "Images";
-}
-
-@section styles {
-    <abp-style-bundle>
-        <abp-style src="/css/demo.css" />
-    </abp-style-bundle>
-}
-
-<h2>Images</h2>
-
-<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Images</a>.</p>
-
-<h4># Image Examples</h4>
-
-<div class="demo-with-code">
-    <div class="demo-area">
-        <abp-image src="..." responsive="true"></abp-image>
-    </div>
-    <div class="code-area">
-        <pre>
-&lt;abp-image src=&quot;...&quot; responsive=&quot;true&quot;&gt;&lt;/abp-image&gt;
-</pre>
-    </div>
-</div>
-
-<div class="demo-with-code">
-    <div class="demo-area">
-        <abp-image src="..." thumbnail="true" rounded="true"></abp-image>
-    </div>
-    <div class="code-area">
-        <pre>
-&lt;abp-image src=&quot;...&quot; thumbnail=&quot;true&quot; rounded=&quot;true&quot;&gt;&lt;/abp-image&gt;
-</pre>
-    </div>
-</div>
-
-<div class="demo-with-code">
-    <div class="demo-area">
-        <abp-image src="..." rounded="true" position="Left"></abp-image>
-        <abp-image src="..." rounded="true" position="Center"></abp-image>
-        <abp-image src="..." rounded="true" position="Right"></abp-image>
-    </div>
-    <div class="code-area">
-        <pre>
-&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Left&quot;&gt;&lt;/abp-image&gt;
-&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Center&quot;&gt;&lt;/abp-image&gt;
-&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Right&quot;&gt;&lt;/abp-image&gt;
-</pre>
-    </div>
-</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml

@@ -10,11 +10,23 @@
     </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>List Groups</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"> Bootstrap List Group</a>.</p>
 
-<h4># List Group Example</h4>
+<h4>Basic example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -25,116 +37,329 @@
             <abp-list-group-item>Morbi leo risus</abp-list-group-item>
             <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
         </abp-list-group>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-list-group&gt;
-    &lt;abp-list-group-item active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Porta ac consectetur ac&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># List Group Flush Example</h4>
+<h4>Active & disabled items</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-list-group flush="true">
+        <abp-list-group>
             <abp-list-group-item>Cras justo odio</abp-list-group-item>
-            <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+            <abp-list-group-item active="true">Dapibus ac facilisis in</abp-list-group-item>
             <abp-list-group-item>Morbi leo risus</abp-list-group-item>
-            <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+            <abp-list-group-item disabled="true">Vestibulum at eros</abp-list-group-item>
         </abp-list-group>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
     &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item active=&quot;true&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item active&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item disabled&quot;&gt;Porta ac consectetur ac&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># List Group Link Example</h4>
+<h4>Links and buttons</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-list-group>
-            <abp-list-group-item href="#">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item>
             <abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item>
             <abp-list-group-item href="#">Morbi leo risus</abp-list-group-item>
-            <abp-list-group-item href="#">Vestibulum at eros</abp-list-group-item>
+            <abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item>
         </abp-list-group>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-list-group&gt;
-    &lt;abp-list-group-item href=&quot;#&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item href=&quot;#&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item href=&quot;#&quot;&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item href=&quot;#&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;Cras justo odio&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Morbi leo risus&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action disabled&quot;&gt;Vestibulum at eros&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># List Group Button Example</h4>
-
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-list-group>
-            <abp-list-group-item tag-type="Button">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item tag-type="Button" active="true">Cras justo odio</abp-list-group-item>
             <abp-list-group-item tag-type="Button">Dapibus ac facilisis in</abp-list-group-item>
             <abp-list-group-item tag-type="Button">Morbi leo risus</abp-list-group-item>
             <abp-list-group-item tag-type="Button">Vestibulum at eros</abp-list-group-item>
         </abp-list-group>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item tag-type=&quot;Button&quot; active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
     &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;
+    Cras justo odio
+  &lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Morbi leo risus&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Porta ac consectetur ac&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot; disabled&gt;Vestibulum at eros&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># List Group style Contextual classes Example</h4>
+<h4>Flush</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group flush="true">
+            <abp-list-group-item>Cras justo odio</abp-list-group-item>
+            <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+            <abp-list-group-item>Morbi leo risus</abp-list-group-item>
+            <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+        </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group flush=&quot;true&quot;&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group list-group-flush&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Contextual classes</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-list-group>
-            <abp-list-group-item type="Warning">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item>Cras justo odio</abp-list-group-item>
-            <abp-list-group-item type="Danger">Dapibus ac facilisis in</abp-list-group-item>
+            <abp-list-group-item type="Primary">A simple Primary list group item</abp-list-group-item>
-            <abp-list-group-item type="Success">Morbi leo risus <span abp-badge-pill="Success">42</span></abp-list-group-item>
+            <abp-list-group-item type="Secondary">A simple Secondary list group item</abp-list-group-item>
-            <abp-list-group-item type="Secondary">Vestibulum at eros <span abp-badge-pill="Warning">5</span></abp-list-group-item>
+            <abp-list-group-item type="Success">A simple Success list group item</abp-list-group-item>
+            <abp-list-group-item type="Danger">A simple Danger list group item</abp-list-group-item>
+            <abp-list-group-item type="Warning">A simple Warning list group item</abp-list-group-item>
+            <abp-list-group-item type="Info">A simple Info list group item</abp-list-group-item>
+            <abp-list-group-item type="Light">A simple Light list group item</abp-list-group-item>
+            <abp-list-group-item type="Dark">A simple Dark list group item</abp-list-group-item>
         </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Primary&quot;&gt;A simple Primary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Secondary&quot;&gt;A simple Secondary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Success&quot;&gt;A simple Success list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Danger&quot;&gt;A simple Danger list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Warning&quot;&gt;A simple Warning list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Info&quot;&gt;A simple Info list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Light&quot;&gt;A simple Light list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Dark&quot;&gt;A simple Dark list group item&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-primary&quot;&gt;A simple primary list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-secondary&quot;&gt;A simple secondary list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-success&quot;&gt;A simple success list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-danger&quot;&gt;A simple danger list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-warning&quot;&gt;A simple warning list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-info&quot;&gt;A simple info list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-light&quot;&gt;A simple light list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-dark&quot;&gt;A simple dark list group item&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group>
+            <abp-list-group-item href="#">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item href="#" type="Primary">A simple Primary list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Secondary">A simple Secondary list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Success">A simple Success list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Danger">A simple Danger list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Warning">A simple Warning list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Info">A simple Info list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Light">A simple Light list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Dark">A simple Dark list group item</abp-list-group-item>
+        </abp-list-group>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper">
-    &lt;abp-list-group-item type=&quot;Warning&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+                <pre><code>
-    &lt;abp-list-group-item type=&quot;Danger&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+&lt;abp-list-group&gt;
-    &lt;abp-list-group-item type=&quot;Success&quot;&gt;Morbi leo risus &lt;span abp-badge-pill=&quot;Success&quot;&gt;42&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item type=&quot;Secondary&quot;&gt;Vestibulum at eros &lt;span abp-badge-pill=&quot;Warning&quot;&gt;5&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Primary&quot;&gt;A simple Primary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Secondary&quot;&gt;A simple Secondary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Success&quot;&gt;A simple Success list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Danger&quot;&gt;A simple Danger list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Warning&quot;&gt;A simple Warning list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Info&quot;&gt;A simple Info list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Light&quot;&gt;A simple Light list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Dark&quot;&gt;A simple Dark list group item&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-primary&quot;&gt;A simple primary list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-secondary&quot;&gt;A simple secondary list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-success&quot;&gt;A simple success list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-danger&quot;&gt;A simple danger list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-warning&quot;&gt;A simple warning list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-info&quot;&gt;A simple info list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-light&quot;&gt;A simple light list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-dark&quot;&gt;A simple dark list group item&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>With badges</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group>
+            <abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item>
+            <abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item>
+            <abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item>
+        </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio &lt;span abp-badge-pill=&quot;Primary&quot;&gt;14&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Dapibus ac facilisis in &lt;span abp-badge-pill=&quot;Primary&quot;&gt;2&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Morbi leo risus &lt;span abp-badge-pill=&quot;Primary&quot;&gt;1&lt;/span&gt;&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Cras justo odio
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;14&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Dapibus ac facilisis in
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;2&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Morbi leo risus
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;1&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml

@@ -11,38 +11,81 @@
     </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>Modals</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"> Bootstrap Modal</a>.</p>
 
-<h4># Modal Example</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button button-type="Success" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
+        <abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
-
-        <abp-modal id="myModal">
-
-            <abp-modal-header title="Header"></abp-modal-header>
 
+        <abp-modal centered="true" size="Large" id="myModal">
+            <abp-modal-header title="Modal title"></abp-modal-header>
             <abp-modal-body>
-                Body
+                Woohoo, you're reading this text in a modal!
             </abp-modal-body>
-
             <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
-
         </abp-modal>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-modal id=&quot;myModal&quot;&gt;
+            <abp-tab title="Tag Helper">
-   &lt;abp-modal-header title=&quot;Header&quot;&gt;&lt;/abp-modal-header&gt;
+                <pre><code>
+&lt;abp-button button-type=&quot;Primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Launch modal&lt;/abp-button&gt;
+
+&lt;abp-modal centered=&quot;true&quot; size=&quot;Large&quot; id=&quot;myModal&quot;&gt;
+   &lt;abp-modal-header title=&quot;Modal title&quot;&gt;&lt;/abp-modal-header&gt;
    &lt;abp-modal-body&gt;
-       Body
+       Woohoo, you're reading this text in a modal!
    &lt;/abp-modal-body&gt;
    &lt;abp-modal-footer buttons=&quot;(AbpModalButtons.Save|AbpModalButtons.Close)&quot;&gt;&lt;/abp-modal-footer&gt;
 &lt;/abp-modal&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;!-- Button trigger modal --&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal&quot;&gt;
+  Launch demo modal
+&lt;/button&gt;
+
+&lt;!-- Modal --&gt;
+&lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
+  &lt;div class=&quot;modal-dialog modal-dialog-centered modal-lg&quot; role=&quot;document&quot;&gt;
+    &lt;div class=&quot;modal-content&quot;&gt;
+      &lt;div class=&quot;modal-header&quot;&gt;
+        &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
+        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
+          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
+        &lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;modal-body&quot;&gt;
+        ...
+      &lt;/div&gt;
+      &lt;div class=&quot;modal-footer&quot;&gt;
+        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
+        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml

@@ -10,18 +10,31 @@
     </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>Navs</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>
 
-<h4># Navs Examples</h4>
+<h4>Base nav</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-nav nav-style="Pill" align="Center">
             <abp-nav-item>
-                <a abp-nav-link Active="true" href="#">Active</a>
+                <a abp-nav-link active="true" href="#">Active</a>
             </abp-nav-item>
             <abp-nav-item>
                 <a abp-nav-link href="#">Longer nav link</a>
@@ -33,29 +46,59 @@
                 <a abp-nav-link disabled="true" href="#">disabled</a>
             </abp-nav-item>
         </abp-nav>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-        &lt;abp-nav nav-style=&quot;Pill&quot; align=&quot;Center&quot;&gt;
+            <abp-tab title="Tag Helper">
-            &lt;abp-nav-item&gt;
+                <pre><code>
-                &lt;a abp-nav-link Active=&quot;true&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt;
+
-            &lt;/abp-nav-item&gt;
+&lt;abp-nav nav-style=&quot;Pill&quot; align=&quot;Center&quot;&gt;
-            &lt;abp-nav-item &gt;
+    &lt;abp-nav-item&gt;
-                &lt;a abp-nav-link  href=&quot;#&quot;&gt;Longer nav link&lt;/a&gt;
+&lt;a abp-nav-link active=&quot;true&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt;
-            &lt;/abp-nav-item&gt;
+    &lt;/abp-nav-item&gt;
-            &lt;abp-nav-item &gt;
+    &lt;abp-nav-item&gt;
-                &lt;a abp-nav-link  href=&quot;#&quot;&gt;link&lt;/a&gt;
+&lt;a abp-nav-link href=&quot;#&quot;&gt;Longer nav link&lt;/a&gt;
-            &lt;/abp-nav-item&gt;
+    &lt;/abp-nav-item&gt;
-            &lt;abp-nav-item &gt;
+    &lt;abp-nav-item&gt;
-                &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;disabled&lt;/a&gt;
+&lt;a abp-nav-link href=&quot;#&quot;&gt;link&lt;/a&gt;
-            &lt;/abp-nav-item&gt;
+    &lt;/abp-nav-item&gt;
-        &lt;/abp-nav&gt;
+    &lt;abp-nav-item&gt;
-</pre>
+&lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;disabled&lt;/a&gt;
+    &lt;/abp-nav-item&gt;
+&lt;/abp-nav&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;nav justify-content-center nav-pills&quot;&gt;
+   &lt;li class=&quot;nav-item&quot;&gt;
+       &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
+   &lt;/li&gt;
+   &lt;li class=&quot;nav-item&quot;&gt;
+       &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Longer nav link&lt;/a&gt;
+   &lt;/li&gt;
+   &lt;li class=&quot;nav-item&quot;&gt;
+       &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;link&lt;/a&gt;
+   &lt;/li&gt;
+   &lt;li class=&quot;nav-item&quot;&gt;
+       &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;disabled&lt;/a&gt;
+   &lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+
+    <div class="attribute-area">
+        <ul>
+            <li>
+                <b>For vertical nav</b>, set nav-style "PillVertical". 
+            </li>
+        </ul>
     </div>
 </div>
 
-<h4># Navs Examples</h4>
+<h4>Base nav</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -92,42 +135,85 @@
                 </abp-navbar-nav>
             </abp-navbar-toggle>
         </abp-nav-bar>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-        &lt;abp-nav-bar size=&quot;Lg&quot; navbar-style=&quot;Dark_Warning&quot;&gt;
+            <abp-tab title="Tag Helper">
-            &lt;a abp-navbar-brand href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
+                <pre><code>
-            &lt;abp-navbar-toggle&gt;
+
-                &lt;abp-navbar-nav&gt;
+&lt;abp-nav-bar size=&quot;Lg&quot; navbar-style=&quot;Dark_Warning&quot;&gt;
-                    &lt;abp-nav-item active=&quot;true&quot;&gt;
+    &lt;a abp-navbar-brand href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
-                        &lt;a abp-nav-link href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
+    &lt;abp-navbar-toggle&gt;
-                    &lt;/abp-nav-item&gt;
+        &lt;abp-navbar-nav&gt;
-                    &lt;abp-nav-item&gt;
+            &lt;abp-nav-item active=&quot;true&quot;&gt;
-                        &lt;a abp-nav-link href=&quot;#&quot;&gt;Link&lt;/a&gt;
+                &lt;a abp-nav-link href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
-                    &lt;/abp-nav-item&gt;
+            &lt;/abp-nav-item&gt;
-                    &lt;abp-nav-item dropdown=&quot;true&quot;&gt;
+            &lt;abp-nav-item&gt;
-                        &lt;abp-dropdown&gt;
+                &lt;a abp-nav-link href=&quot;#&quot;&gt;Link&lt;/a&gt;
-                            &lt;abp-dropdown-button nav-link=&quot;true&quot; text=&quot;Dropdown&quot; /&gt;
+            &lt;/abp-nav-item&gt;
-                            &lt;abp-dropdown-menu&gt;
+            &lt;abp-nav-item dropdown=&quot;true&quot;&gt;
-                                &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+                &lt;abp-dropdown&gt;
-                                &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+                    &lt;abp-dropdown-button nav-link=&quot;true&quot; text=&quot;Dropdown&quot; /&gt;
-                                &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+                    &lt;abp-dropdown-menu&gt;
-                                &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+                        &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
-                                &lt;abp-dropdown-divider /&gt;
+                        &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
-                                &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
+                        &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
-                            &lt;/abp-dropdown-menu&gt;
+                        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
-                        &lt;/abp-dropdown&gt;
+                        &lt;abp-dropdown-divider /&gt;
-                    &lt;/abp-nav-item&gt;
+                        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
-                    &lt;abp-nav-item&gt;
+                    &lt;/abp-dropdown-menu&gt;
-                        &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;
+                &lt;/abp-dropdown&gt;
-                    &lt;/abp-nav-item&gt;
+            &lt;/abp-nav-item&gt;
-                &lt;/abp-navbar-nav&gt;            
+            &lt;abp-nav-item&gt;
-            &lt;span abp-navbar-text&gt;
+                &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;
+            &lt;/abp-nav-item&gt;
+        &lt;/abp-navbar-nav&gt;            
+        &lt;span abp-navbar-text&gt;
+          Sample Text
+        &lt;/span&gt;
+    &lt;/abp-navbar-toggle&gt;
+&lt;/abp-nav-bar&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-warning&quot;&gt;
+    &lt;a href=&quot;#&quot; class=&quot;navbar-brand&quot;&gt;Navbar&lt;/a&gt;
+    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#13da550319ec478099dd4c9c3efb3d09&quot; aria-controls=&quot;13da550319ec478099dd4c9c3efb3d09&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
+    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
+    &lt;/button&gt;&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;13da550319ec478099dd4c9c3efb3d09&quot;&gt;
+        &lt;ul class=&quot;navbar-nav&quot;&gt;
+            &lt;li active=&quot;true&quot; class=&quot;nav-item&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
+            &lt;/li&gt;
+            &lt;li class=&quot;nav-item&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
+            &lt;/li&gt;
+            &lt;li class=&quot;nav-item dropdown&quot;&gt;
+                &lt;div class=&quot;btn-group&quot;&gt;
+                    &lt;a class=&quot;dropdown-toggle btn nav-link&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; data-busy-text=&quot;Processing...&quot; roles=&quot;button&quot; href=&quot;#&quot;&gt;&lt;span&gt;Dropdown&lt;/span&gt;&lt;/a&gt;
+                    &lt;div&gt;&lt;/div&gt;
+                    &lt;div class=&quot;dropdown-menu&quot;&gt;
+                        &lt;h6 class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;/h6&gt;
+                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item active&quot;&gt;Action&lt;/a&gt;
+                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item disabled&quot;&gt;Another disabled action&lt;/a&gt;
+                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
+                        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
+                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/li&gt;
+            &lt;li class=&quot;nav-item&quot;&gt;
+                &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
+            &lt;/li&gt;
+            &lt;span class=&quot;navbar-text&quot;&gt;
                  Sample Text
             &lt;/span&gt;
-            &lt;/abp-navbar-toggle&gt;
+        &lt;/ul&gt;
-        &lt;/abp-nav-bar&gt;
+    &lt;/div&gt;
-</pre>
+&lt;/nav&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml

@@ -10,34 +10,99 @@
     </abp-style-bundle>
 }
 
-<h2>Paginator</h2>
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
 
-<h4># Paginator Examples</h4>
+<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>
 
-<div class="demo-with-code">
-    <div class="demo-area">
 
-        <abp-paginator model="@Model.PagerModel" />
+<h2>Paginator</h2>
+
+
+<h4>Example</h4>
 
-    </div>
-    <div class="code-area">
-        <pre>
-&lt;abp-paginator model=&quot;Model.PagerModel&quot;/&gt;
-</pre>
-    </div>
-</div>
-<br>
-<br>
-<br>
 <div class="demo-with-code">
     <div class="demo-area">
-
         <abp-paginator model="@Model.PagerModel" show-info="true" />
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-paginator model=&quot;Model.PagerModel&quot; show-info=&quot;true&quot;/&gt;
+            <abp-tab title="Modal Class">
-</pre>
+                <pre><code>
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class PaginatorModel : PageModel
+    {
+        public PagerModel PagerModel { get; set; }
+
+        public void OnGet(int currentPage, string sort)
+        {
+            PagerModel = new PagerModel(100, 10, currentPage, 10, "Paginator", sort);
+        }
+    }
+}
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-paginator model=&quot;Model.PagerModel&quot; show-info=&quot;true&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;row mt-3&quot;&gt;    
+    &lt;div class=&quot;col-sm-12 col-md-5&quot;&gt;
+        Showing 80 to 90 of 100 entries.
+    &lt;/div&gt;
+    &lt;div class=&quot;col-sm-12 col-md-7&quot;&gt;
+        &lt;nav aria-label=&quot;Page navigation&quot;&gt;
+            &lt;ul class=&quot;pagination justify-localizationKey-end&quot;&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;Previous&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=1&quot;&gt;1&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=2&quot;&gt;2&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;span class=&quot;page-link gap&quot;&gt;&mldr;&lt;/span&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;7&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item active&quot;&gt;
+                     &lt;span class=&quot;page-link&quot;&gt;
+                        8
+                        &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;
+                     &lt;/span&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;9&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=10&quot;&gt;10&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;Next&lt;/a&gt;
+                &lt;/li&gt;
+            &lt;/ul&gt;
+         &lt;!-- nav--&gt;
+    &lt;/nav&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
+</div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs

@@ -1,9 +1,4 @@
-using System;
+using Microsoft.AspNetCore.Mvc.RazorPages;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc.RazorPages;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml

@@ -1,7 +1,7 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.PopoversModel
 @{
-    ViewData["Title"] = "Badges";
+    ViewData["Title"] = "Popovers";
 }
 
 @section styles {
@@ -10,11 +10,25 @@
     </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>Popovers</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/Popovers/" target="_blank"> Bootstrap Popovers</a>.</p>
 
-<h4># Popovers Examples</h4>
+
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -31,23 +45,41 @@
         <abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
             Disabled Popover
         </abp-button>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-button abp-popover=&quot;Hi, i&#39;m popover content!&quot;&gt;
+            <abp-tab title="Tag Helper" active="true">
-   Popover Default
+                <pre><code>
+&lt;abp-button abp-popover=&quot;Hi, i&apos;m popover content!&quot;&gt;
+       Popover Default
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-top=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot;&gt;
+&lt;abp-button abp-popover-top=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot;&gt;
-   Popover With Title
+       Popover With Title
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-right=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; dismissible=&quot;true&quot;&gt;
+&lt;abp-button abp-popover-right=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot; dismissible=&quot;true&quot;&gt;
-   Dismissible Popover
+       Dismissible Popover
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-left=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; disabled=&quot;true&quot;&gt;
+&lt;abp-button abp-popover-left=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot; disabled=&quot;true&quot;&gt;
-   Disabled Popover
+       Disabled Popover
 &lt;/abp-button&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;popover&quot; data-placement=&quot;bottom&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;
+      Popover Default
+&lt;/button&gt;
+&lt;button title=&quot;&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;popover&quot; data-placement=&quot;top&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;Popover Title&quot;&gt;
+      Popover With Title
+&lt;/button&gt;
+&lt;button title=&quot;&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;popover&quot; data-placement=&quot;right&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-trigger=&quot;focus&quot; data-original-title=&quot;Popover Title&quot;&gt;
+      Dismissible Popover
+&lt;/button&gt;
+&lt;span class=&quot;d-inline-block&quot; title=&quot;&quot; data-placement=&quot;left&quot; data-toggle=&quot;popover&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;Popover Title&quot;&gt;&lt;button title=&quot;Popover Title&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; style=&quot;pointer-events: none;&quot;&gt;
+      Disabled Popover
+&lt;/button&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
-

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml

@@ -14,65 +14,70 @@
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/progress/" target="_blank"> Bootstrap Progress Bars</a>.</p>
 
-<h4># Progress Bar Examples</h4>
+
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-progress>
+        <abp-progress-bar value="70" />
-            <abp-progress-bar value="70"/>
-        </abp-progress>
         <br />
-        <abp-progress>
+        <abp-progress-bar type="Warning" value="25"> %25 </abp-progress-bar>
-            <abp-progress-bar type="Warning" value="25">
-                %25
-            </abp-progress-bar>
-        </abp-progress>
         <br />
-        <abp-progress>
+        <abp-progress-bar type="Success" value="40" strip="true"/>
-            <abp-progress-bar type="Success" value="40" strip="true">
-            </abp-progress-bar>
-        </abp-progress>
         <br />
-        <abp-progress>
+        <abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true"> %50 </abp-progress-bar>
-            <abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true">
-                %50
-            </abp-progress-bar>
-        </abp-progress>
         <br />
-        <abp-progress>
+        <abp-progress-group>
-            <abp-progress-bar type="Success" value="25">
+            <abp-progress-part type="Success" value="25"/>
-            </abp-progress-bar>
+            <abp-progress-part type="Danger" value="10" strip="true"> %10 </abp-progress-part>
-            <abp-progress-bar type="Danger" value="10" strip="true">
+            <abp-progress-part type="Primary" value="50" animation="true" strip="true" />
-                %10
+        </abp-progress-group>
-            </abp-progress-bar>
-            <abp-progress-bar type="Primary" value="50" animation="true" strip="true">
-            </abp-progress-bar>
-        </abp-progress>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-progress&gt;
+            <abp-tab title="Tag Helper" active="true">
-  &lt;abp-progress-bar value=&quot;70&quot;/&gt;
+                <pre><code>
-&lt;/abp-progress&gt;
+&lt;abp-progress-bar value=&quot;70&quot; /&gt;
+
+&lt;abp-progress-bar type=&quot;Warning&quot; value=&quot;25&quot;&gt; %25 &lt;/abp-progress-bar&gt;
+
+&lt;abp-progress-bar type=&quot;Success&quot; value=&quot;40&quot; strip=&quot;true&quot;/&gt;
+
+&lt;abp-progress-bar type=&quot;Dark&quot; value=&quot;10&quot; min-value=&quot;5&quot; max-value=&quot;15&quot; strip=&quot;true&quot;&gt; %50 &lt;/abp-progress-bar&gt;
+
+&lt;abp-progress-group&gt;
+    &lt;abp-progress-part type=&quot;Success&quot; value=&quot;25&quot;/&gt;
+    &lt;abp-progress-part type=&quot;Danger&quot; value=&quot;10&quot; strip=&quot;true&quot;&gt; %10 &lt;/abp-progress-part&gt;
+    &lt;abp-progress-part type=&quot;Primary&quot; value=&quot;50&quot; animation=&quot;true&quot; strip=&quot;true&quot; /&gt;
+&lt;/abp-progress-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;progress&quot;&gt;
+    &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 70%&quot; aria-valuenow=&quot;70&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
 
-&lt;abp-progress&gt;
+&lt;div class=&quot;progress&quot;&gt;
-  &lt;abp-progress-bar type=&quot;Warning&quot; value=&quot;25&quot;&gt;%25&lt;/abp-progress-bar&gt;
+    &lt;div class=&quot;progress-bar bg-warning&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt; %25 &lt;/div&gt;
-&lt;/abp-progress&gt;
+&lt;/div&gt;
 
-&lt;abp-progress&gt;
+&lt;div class=&quot;progress&quot;&gt;
-  &lt;abp-progress-bar type=&quot;Success&quot; value=&quot;40&quot; strip=&quot;true&quot;/&gt;
+    &lt;div class=&quot;progress-bar progress-bar-striped bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 40%&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
-&lt;/abp-progress&gt;
+&lt;/div&gt;
 
-&lt;abp-progress&gt;
+&lt;div class=&quot;progress&quot;&gt;
-  &lt;abp-progress-bar type=&quot;Dark&quot; value=&quot;10&quot; min-value=&quot;5&quot; max-value=&quot;15&quot;  strip=&quot;true&quot;&gt;%50&lt;/abp-progress-bar&gt;
+    &lt;div class=&quot;progress-bar progress-bar-striped bg-dark&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;5&quot; aria-valuemax=&quot;15&quot;&gt; %50 &lt;/div&gt;
-&lt;/abp-progress&gt;
+&lt;/div&gt;
 
-&lt;abp-progress&gt;
+&lt;div class=&quot;progress&quot;&gt;
-  &lt;abp-progress-bar type=&quot;Success&quot; value=&quot;25&quot;/&gt;
+    &lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
-  &lt;abp-progress-bar type=&quot;Danger&quot; value=&quot;10&quot; strip=&quot;true&quot;&gt;%10&lt;/abp-progress-bar&gt;
+    &lt;div class=&quot;progress-bar progress-bar-striped bg-danger&quot; role=&quot;progressbar&quot; style=&quot;width: 10%&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt; %10 &lt;/div&gt;
-  &lt;abp-progress-bar type=&quot;Primary&quot; value=&quot;50&quot; animation=&quot;true&quot; strip=&quot;true&quot;/&gt;
+    &lt;div class=&quot;progress-bar progress-bar-animated progress-bar-striped bg-primary&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
-&lt;/abp-progress&gt;
+&lt;/div&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml

@@ -10,17 +10,30 @@
     </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>Tables</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
 
-<h4># Tables Examples</h4>
+<h4>Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-table striped-rows="true" hoverable-rows="true" responsive-sm="true">
+        <abp-table hoverable-rows="true" responsive-sm="true">
-            <thead theme="Dark">
+            <thead>
                 <tr>
                     <th scope="Column">#</th>
                     <th scope="Column">First</th>
@@ -33,9 +46,9 @@
                     <th scope="Row">1</th>
                     <td>Mark</td>
                     <td>Otto</td>
-                    <td abp-table-style="Danger">mdo</td>
+                    <td table-style="Danger">mdo</td>
                 </tr>
-                <tr abp-table-style="Warning">
+                <tr table-style="Warning">
                     <th scope="Row">2</th>
                     <td>Jacob</td>
                     <td>Thornton</td>
@@ -43,46 +56,413 @@
                 </tr>
                 <tr>
                     <th scope="Row">3</th>
-                    <td abp-table-style="Success">Larry</td>
+                    <td table-style="Success">Larry</td>
                     <td>the Bird</td>
                     <td>twitter</td>
                 </tr>
             </tbody>
         </abp-table>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-        &lt;abp-table striped-rows=&quot;true&quot; small=&quot;true&quot; hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
+            <abp-tab title="Tag Helper" active="true">
-            &lt;thead theme=&quot;Dark&quot;&gt;
+                <pre><code>
+&lt;abp-table hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
+    &lt;thead&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+        &lt;td&gt;Mark&lt;/td&gt;
+        &lt;td&gt;Otto&lt;/td&gt;
+        &lt;td table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr table-style=&quot;Warning&quot;&gt;
+        &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+        &lt;td&gt;Jacob&lt;/td&gt;
+        &lt;td&gt;Thornton&lt;/td&gt;
+        &lt;td&gt;fat&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+        &lt;td table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
+        &lt;td&gt;the Bird&lt;/td&gt;
+        &lt;td&gt;twitter&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;table-responsive-sm&quot;&gt;
+       &lt;table class=&quot;table table-hover&quot;&gt;
+            &lt;thead&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
             &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+                &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
                 &lt;td&gt;Mark&lt;/td&gt;
                 &lt;td&gt;Otto&lt;/td&gt;
-                &lt;td  abp-table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
+                &lt;td class=&quot;table-danger&quot;&gt;mdo&lt;/td&gt;
             &lt;/tr&gt;
-            &lt;tr abp-table-style=&quot;Warning&quot;&gt;
+            &lt;tr class=&quot;table-warning&quot;&gt;
-                &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+                &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
                 &lt;td&gt;Jacob&lt;/td&gt;
                 &lt;td&gt;Thornton&lt;/td&gt;
                 &lt;td&gt;fat&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+                &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
-                &lt;td abp-table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
+                &lt;td class=&quot;table-success&quot;&gt;Larry&lt;/td&gt;
                 &lt;td&gt;the Bird&lt;/td&gt;
                 &lt;td&gt;twitter&lt;/td&gt;
             &lt;/tr&gt;
             &lt;/tbody&gt;
-        &lt;/abp-table&gt;
+       &lt;/table&gt;
-</pre>
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table small="true" striped-rows="true" border-style="Bordered">
+            <thead Theme="Dark">
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table small=&quot;true&quot; striped-rows=&quot;true&quot; border-style=&quot;Bordered&quot;&gt;
+    &lt;thead Theme=&quot;Dark&quot;&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-sm table-striped table-bordered&quot;&gt;
+    &lt;thead class=&quot;thead-dark&quot;&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table striped-rows="true" dark-theme="true">
+            <caption>List of users</caption>
+            <thead>
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table striped-rows=&quot;true&quot; dark-theme=&quot;true&quot;&gt;
+    &lt;caption&gt;List of users&lt;/caption&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-dark table-striped&quot;&gt;
+    &lt;caption&gt;List of users&lt;/caption&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table border-style="Borderless">
+            <thead>
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table border-style=&quot;Borderless&quot;&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-borderless&quot;&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>

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>
+        <abp-tabs>
-&lt;abp-tabs name=&quot;TabId&quot;&gt;
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-tabs&gt;
     &lt;abp-tab title=&quot;Home&quot;&gt;
-        Content_Home
+             Content_Home
-    &lt;/abp-tab&gt;   
+    &lt;/abp-tab&gt;
-    &lt;abp-tab-link title=&quot;Link&quot; name=&quot;LinkId&quot; href=&quot;#&quot;/&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>
+        <abp-tabs>
-&lt;abp-tabs tab-style=&quot;Pill&quot; &gt;
+            <abp-tab title="Tag Helper" active="true">
-    &lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
+                <pre><code>
-        Content_Home
+&lt;abp-tabs tab-style=&quot;Pill&quot;&gt;
-    &lt;/abp-tab&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>
+        <abp-tabs>
-&lt;abp-tabs name=&quot;TabId&quot;  tab-style=&quot;Pill&quot; vertical-header-size=&quot;_2&quot; &gt;
+            <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>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml

@@ -1,7 +1,7 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TooltipsModel
 @{
-    ViewData["Title"] = "Badges";
+    ViewData["Title"] = "Tooltips";
 }
 
 @section styles {
@@ -14,46 +14,77 @@
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"> Bootstrap Tooltips</a>.</p>
 
-<h4># Tooltips Examples</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-button abp-tooltip="Tooltip Default">
+        <abp-button abp-tooltip="Tooltip">
             Tooltip Default
         </abp-button>
-        <abp-button abp-tooltip-top="Tooltip on top">
+        <abp-button abp-tooltip-top="Tooltip">
             Tooltip on top
         </abp-button>
-        <abp-button abp-tooltip-right="Tooltip on right">
+        <abp-button abp-tooltip-right="Tooltip">
             Tooltip on right
         </abp-button>
-        <abp-button abp-tooltip-bottom="Tooltip on bottom">
+        <abp-button abp-tooltip-bottom="Tooltip">
             Tooltip on bottom
         </abp-button>
-        <abp-button abp-tooltip-left="Tooltip on left">
+        <abp-button disabled="true" abp-tooltip="Tooltip">
-            Tooltip on left
+            Disabled button Tooltip
         </abp-button>
-
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
-&lt;abp-button  abp-tooltip=&quot;Tooltip Default&quot;&gt;
+            <abp-tab title="Tag Helper" active="true">
-  Tooltip Default
+                <pre><code>
+&lt;abp-button abp-tooltip=&quot;Tooltip&quot;&gt;
+      Tooltip Default
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-top=&quot;Tooltip on top&quot;&gt;
+
-   Tooltip on top
+&lt;abp-button abp-tooltip-top=&quot;Tooltip&quot;&gt;
+      Tooltip on top
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-right=&quot;Tooltip on right&quot;&gt;
+
-  Tooltip on right
+&lt;abp-button abp-tooltip-right=&quot;Tooltip&quot;&gt;
+      Tooltip on right
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-bottom=&quot;Tooltip on bottom&quot;&gt;
+
-  Tooltip on bottom
+&lt;abp-button abp-tooltip-bottom=&quot;Tooltip&quot;&gt;
+      Tooltip on bottom
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-left=&quot;Tooltip on left&quot;&gt;
+
-  Tooltip on left
+&lt;abp-button disabled=&quot;true&quot; abp-tooltip=&quot;Tooltip&quot;&gt;
+      Disabled button Tooltip
 &lt;/abp-button&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip Default
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip on top
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+     Tooltip on right
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip on bottom
+&lt;/button&gt;
+
+&lt;span class=&quot;d-inline-block&quot; tabindex=&quot;0&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    &lt;button class=&quot;btn&quot; disabled=&quot;disabled&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-placement=&quot;top&quot; style=&quot;pointer-events: none;&quot;&gt;
+        Disabled button Tooltip
+    &lt;/button&gt;
+&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
-

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/highlightCode.js

@@ -0,0 +1,5 @@
+$(document).ready(function () {
+    $('pre code').each(function (i, block) {
+        hljs.highlightBlock(block);
+    });
+});

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml

@@ -7,27 +7,28 @@
 <h2>Components</h2>
 
 <ul>
-    <li><a asp-page="Components/Buttons">Buttons</a></li>
-    <li><a asp-page="Components/Grids">Grids</a></li>
-    <li><a asp-page="Components/Cards">Cards</a></li>
-    <li><a asp-page="Components/DynamicForms">Dynamic Forms</a></li>
-    <li><a asp-page="Components/Tabs">Tabs</a></li>
-    <li><a asp-page="Components/Dropdowns">Dropdowns</a></li>
     <li><a asp-page="Components/alerts">Alerts</a></li>
     <li><a asp-page="Components/badges">Badges</a></li>
-    <li><a asp-page="Components/Modals">Modals</a></li>
+    @*<li><a asp-page="Components/blockquotes"> > Blockquotes</a></li>*@
-    <li><a asp-page="Components/collapse">Collapse</a></li>
+    <li><a asp-page="Components/Borders">Borders</a></li>
-    <li><a asp-page="Components/tooltips">Tooltips</a></li>
-    <li><a asp-page="Components/Popovers">Popovers</a></li>
     <li><a asp-page="Components/breadcrumbs">Breadcrumbs</a></li>
-    <li><a asp-page="Components/ProgressBars">Progress Bars</a></li>
+    <li><a asp-page="Components/Buttons">Buttons</a></li>
-    <li><a asp-page="Components/blockquotes">Blockquotes</a></li>
+    <li><a asp-page="Components/ButtonGroups">Button Groups</a></li>
-    <li><a asp-page="Components/images">Images</a></li>
+    <li><a asp-page="Components/Cards">Cards</a></li>
     <li><a asp-page="Components/Carousel">Carousel</a></li>
+    <li><a asp-page="Components/collapse">Collapse</a></li>
+    <li><a asp-page="Components/Dropdowns">Dropdowns</a></li>
+    <li><a asp-page="Components/DynamicForms">Dynamic Forms</a></li>
+    <li><a asp-page="Components/FormElements">Form Elements</a></li>
+    <li><a asp-page="Components/Grids"> > Grids</a></li>
     <li><a asp-page="Components/ListGroup">List Groups</a></li>
-    <li><a asp-page="Components/Tables">Tables</a></li>
+    <li><a asp-page="Components/Modals">Modals</a></li>
     <li><a asp-page="Components/Navs">Navs</a></li>
-    <li><a asp-page="Components/Borders">Borders</a></li>
     <li><a asp-page="Components/Paginator">Paginator</a></li>
+    <li><a asp-page="Components/Popovers">Popovers</a></li>
+    <li><a asp-page="Components/ProgressBars">Progress Bars</a></li>
+    <li><a asp-page="Components/Tables">Tables</a></li>
+    <li><a asp-page="Components/Tabs">Tabs</a></li>
+    <li><a asp-page="Components/tooltips">Tooltips</a></li>
 </ul>
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/abp.resourcemapping.js

@@ -7,6 +7,6 @@
         "@libs"
     ],
     mappings: {
-        
+        "@node_modules/highlight.js/**/*.*": "@libs/highlight.js/"
     }
 }

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/package.json

@@ -3,8 +3,8 @@
   "name": "asp.net",
   "private": true,
   "dependencies": {
-    "@abp/aspnetcore.mvc.ui.theme.shared": "^0.4.3"
+    "@abp/aspnetcore.mvc.ui.theme.shared": "^0.4.3",
+    "highlight.js": "^9.13.1"
   },
-  "devDependencies": {
+  "devDependencies": {}
-  }
+}
-}

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.css

@@ -2,9 +2,17 @@
   padding-bottom: 10px;
   margin-bottom: 10px; }
   .demo-with-code .demo-area {
+    margin-top: 20px;
     margin-bottom: 1em; }
+  .demo-with-code .grid .col {
+    background: #ffc9c9;
+    border: 1.5px solid #000000; }
+  .demo-with-code .large-row .row {
+    min-height: 10rem;
+    background: #fcdede;
+    margin-top: 1rem; }
   .demo-with-code .code-area {
     border: 1px solid #ddd;
     padding: 10px;
+    margin-top: 10px;
     font-size: 0.9em; }
-

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.min.css

@@ -1 +1 @@
-.demo-with-code{padding-bottom:10px;margin-bottom:10px;}.demo-with-code .demo-area{margin-bottom:1em;}.demo-with-code .code-area{border:1px solid #ddd;padding:10px;font-size:.9em;}
+.demo-with-code{padding-bottom:10px;margin-bottom:10px;}.demo-with-code .demo-area{margin-top:20px;margin-bottom:1em;}.demo-with-code .grid .col{background:#ffc9c9;border:1.5px solid #000;}.demo-with-code .large-row .row{min-height:10rem;background:#fcdede;margin-top:1rem;}.demo-with-code .code-area{border:1px solid #ddd;padding:10px;margin-top:10px;font-size:.9em;}

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.scss

@@ -7,6 +7,17 @@
         margin-bottom: 1em;
     }
 
+    .grid .col {
+        background: #ffc9c9;
+        border: 1.5px solid #000000;
+    }
+
+    .large-row .row {
+        min-height: 10rem;
+        background: #fcdede;
+        margin-top: 1rem;
+    }
+
     .code-area {
         border: 1px solid #ddd;
         padding: 10px;

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/README.md

@@ -0,0 +1,186 @@
+# Highlight.js
+
+[![Build Status](https://travis-ci.org/highlightjs/highlight.js.svg?branch=master)](https://travis-ci.org/highlightjs/highlight.js)
+
+Highlight.js is a syntax highlighter written in JavaScript. It works in
+the browser as well as on the server. It works with pretty much any
+markup, doesn’t depend on any framework, and has automatic language
+detection.
+
+## Getting Started
+
+The bare minimum for using highlight.js on a web page is linking to the
+library along with one of the styles and calling
+[`initHighlightingOnLoad`][1]:
+
+```html
+<link rel="stylesheet" href="/path/to/styles/default.css">
+<script src="/path/to/highlight.pack.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+```
+
+This will find and highlight code inside of `<pre><code>` tags; it tries
+to detect the language automatically. If automatic detection doesn’t
+work for you, you can specify the language in the `class` attribute:
+
+```html
+<pre><code class="html">...</code></pre>
+```
+
+The list of supported language classes is available in the [class
+reference][2].  Classes can also be prefixed with either `language-` or
+`lang-`.
+
+To make arbitrary text look like code, but without highlighting, use the
+`plaintext` class:
+
+```html
+<pre><code class="plaintext">...</code></pre>
+```
+
+To disable highlighting altogether use the `nohighlight` class:
+
+```html
+<pre><code class="nohighlight">...</code></pre>
+```
+
+## Custom Initialization
+
+When you need a bit more control over the initialization of
+highlight.js, you can use the [`highlightBlock`][3] and [`configure`][4]
+functions. This allows you to control *what* to highlight and *when*.
+
+Here’s an equivalent way to calling [`initHighlightingOnLoad`][1] using
+jQuery:
+
+```javascript
+$(document).ready(function() {
+  $('pre code').each(function(i, block) {
+    hljs.highlightBlock(block);
+  });
+});
+```
+
+You can use any tags instead of `<pre><code>` to mark up your code. If
+you don't use a container that preserves line breaks you will need to
+configure highlight.js to use the `<br>` tag:
+
+```javascript
+hljs.configure({useBR: true});
+
+$('div.code').each(function(i, block) {
+  hljs.highlightBlock(block);
+});
+```
+
+For other options refer to the documentation for [`configure`][4].
+
+
+## Web Workers
+
+You can run highlighting inside a web worker to avoid freezing the browser
+window while dealing with very big chunks of code.
+
+In your main script:
+
+```javascript
+addEventListener('load', function() {
+  var code = document.querySelector('#code');
+  var worker = new Worker('worker.js');
+  worker.onmessage = function(event) { code.innerHTML = event.data; }
+  worker.postMessage(code.textContent);
+})
+```
+
+In worker.js:
+
+```javascript
+onmessage = function(event) {
+  importScripts('<path>/highlight.pack.js');
+  var result = self.hljs.highlightAuto(event.data);
+  postMessage(result.value);
+}
+```
+
+
+## Getting the Library
+
+You can get highlight.js as a hosted, or custom-build, browser script or
+as a server module. Right out of the box the browser script supports
+both AMD and CommonJS, so if you wish you can use RequireJS or
+Browserify without having to build from source. The server module also
+works perfectly fine with Browserify, but there is the option to use a
+build specific to browsers rather than something meant for a server.
+Head over to the [download page][5] for all the options.
+
+**Don't link to GitHub directly.** The library is not supposed to work straight
+from the source, it requires building. If none of the pre-packaged options
+work for you refer to the [building documentation][6].
+
+**The CDN-hosted package doesn't have all the languages.** Otherwise it'd be
+too big. If you don't see the language you need in the ["Common" section][5],
+it can be added manually:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
+```
+
+**On Almond.** You need to use the optimizer to give the module a name. For
+example:
+
+```
+r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
+```
+
+
+### CommonJS
+
+You can import Highlight.js as a CommonJS-module:
+
+```bash
+npm install highlight.js --save
+```
+
+In your application:
+
+```javascript
+import hljs from 'highlight.js';
+```
+
+The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:
+
+```javascript
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+hljs.registerLanguage('javascript', javascript);
+```
+
+To set the syntax highlighting style, if your build tool processes CSS from your JavaScript entry point, you can import the stylesheet directly into your CommonJS-module:
+
+```javascript
+import hljs from 'highlight.js/lib/highlight';
+import 'highlight.js/styles/github.css'
+```
+
+## License
+
+Highlight.js is released under the BSD License. See [LICENSE][7] file
+for details.
+
+## Links
+
+The official site for the library is at <https://highlightjs.org/>.
+
+Further in-depth documentation for the API and other topics is at
+<http://highlightjs.readthedocs.io/>.
+
+Authors and contributors are listed in the [AUTHORS.en.txt][8] file.
+
+[1]: http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload
+[2]: http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
+[3]: http://highlightjs.readthedocs.io/en/latest/api.html#highlightblock-block
+[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
+[5]: https://highlightjs.org/download/
+[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
+[7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
+[8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.en.txt

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/api.rst

@@ -0,0 +1,120 @@
+Library API
+===========
+
+Highlight.js exports a few functions as methods of the ``hljs`` object.
+
+
+``highlight(name, value, ignore_illegals, continuation)``
+---------------------------------------------------------
+
+Core highlighting function.
+Accepts a language name, or an alias, and a string with the code to highlight.
+The ``ignore_illegals`` parameter, when present and evaluates to a true value,
+forces highlighting to finish even in case of detecting illegal syntax for the
+language instead of throwing an exception.
+The ``continuation`` is an optional mode stack representing unfinished parsing.
+When present, the function will restart parsing from this state instead of
+initializing a new one.
+Returns an object with the following properties:
+
+* ``language``: language name, same as the one passed into a function, returned for consistency with ``highlightAuto``
+* ``relevance``: integer value
+* ``value``: HTML string with highlighting markup
+* ``top``: top of the current mode stack
+
+
+``highlightAuto(value, languageSubset)``
+----------------------------------------
+
+Highlighting with language detection.
+Accepts a string with the code to highlight and an optional array of language names and aliases restricting detection to only those languages. The subset can also be set with ``configure``, but the local parameter overrides the option if set.
+Returns an object with the following properties:
+
+* ``language``: detected language
+* ``relevance``: integer value
+* ``value``: HTML string with highlighting markup
+* ``second_best``: object with the same structure for second-best heuristically detected language, may be absent
+
+
+``fixMarkup(value)``
+--------------------
+
+Post-processing of the highlighted markup. Currently consists of replacing indentation TAB characters and using ``<br>`` tags instead of new-line characters. Options are set globally with ``configure``.
+
+Accepts a string with the highlighted markup.
+
+
+``highlightBlock(block)``
+-------------------------
+
+Applies highlighting to a DOM node containing code.
+
+This function is the one to use to apply highlighting dynamically after page load
+or within initialization code of third-party Javascript frameworks.
+
+The function uses language detection by default but you can specify the language
+in the ``class`` attribute of the DOM node. See the :doc:`class reference
+</css-classes-reference>` for all available language names and aliases.
+
+
+``configure(options)``
+----------------------
+
+Configures global options:
+
+* ``tabReplace``: a string used to replace TAB characters in indentation.
+* ``useBR``: a flag to generate ``<br>`` tags instead of new-line characters in the output, useful when code is marked up using a non-``<pre>`` container.
+* ``classPrefix``: a string prefix added before class names in the generated markup, used for backwards compatibility with stylesheets.
+* ``languages``: an array of language names and aliases restricting auto detection to only these languages.
+
+Accepts an object representing options with the values to updated. Other options don't change
+::
+
+  hljs.configure({
+    tabReplace: '    ', // 4 spaces
+    classPrefix: ''     // don't append class prefix
+                        // … other options aren't changed
+  })
+  hljs.initHighlighting();
+
+
+``initHighlighting()``
+----------------------
+
+Applies highlighting to all ``<pre><code>..</code></pre>`` blocks on a page.
+
+
+
+``initHighlightingOnLoad()``
+----------------------------
+
+Attaches highlighting to the page load event.
+
+
+``registerLanguage(name, language)``
+------------------------------------
+
+Adds new language to the library under the specified name. Used mostly internally.
+
+* ``name``: a string with the name of the language being registered
+* ``language``: a function that returns an object which represents the
+  language definition. The function is passed the ``hljs`` object to be able
+  to use common regular expressions defined within it.
+
+
+``listLanguages()``
+----------------------------
+
+Returns the languages names list.
+
+
+
+.. _getLanguage:
+
+
+``getLanguage(name)``
+---------------------
+
+Looks up a language by name or alias.
+
+Returns the language object if found, ``undefined`` otherwise.