meta info

AlertTagHelper - Frontend Alerts

By Ziya Mollamahmut

Setup

Install nuget package

Install-Package LazZiya.TagHelpers

Add taghelpers in _ViewImports.cshtml

@addTagHelper *, LazZiya.TagHelpers

Basic usage

Create bootstrap 4.x themed alerts with simple html tag.

<alert-primary>
 This is a primary alert from the front end.
</alert-primary>

Primary alert front end

Un-dismissable alert

Use dismissable attribute to remove the alert closing button.

<alert-info dismissable="false">
 This an alert that can't be dismissed!
</alert-info>

Alert no dismiss

Alert header

Add alert header using alert-heading attribute

<alert-warning alert-heading="Warning!">
 This is a warning alert with header.
</alert-warning>

Alert with header

Html content

It is possible to use html content inside the alert body.

<alert-danger>
 <h3>Danger alert</h3>
 <p>This is a danger alert with html content.</p>
 <hr />
 <p class="text-dark">Use your creativity to style the content as you wish.</p>
</alert-danger>

Alert with HTML content

All alerts

<alert-primary>
<alert-secondary>
<alert-success>
<alert-info>
<alert-warning>
<alert-danger>
<alert-light>
<alert-dark>

All alerts

See samples in the demo page.