Blazor Bootstrap: Alert Component Examples

Alerts

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.

<div>
    <Alert Color="AlertColor.Primary"> A simple primary alert. </Alert>
    <Alert Color="AlertColor.Secondary"> A simple secondary alert. </Alert>
    <Alert Color="AlertColor.Success"> A simple success alert. </Alert>
    <Alert Color="AlertColor.Danger"> A simple danger alert. </Alert>
    <Alert Color="AlertColor.Warning"> A simple warning alert. </Alert>
    <Alert Color="AlertColor.Info"> A simple info alert. </Alert>
</div>

Additional Content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div>
    <Alert Color="AlertColor.Success">
        <h4 class="alert-heading">Well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
        <hr>
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </Alert>
</div>

Icons

Similarly, you can use Bootstrap Icons to create alerts with icons.

<div>
    <Alert Color="AlertColor.Primary"> <Icon Name="IconName.InfoCircleFill" class="me-2"></Icon>An example alert with an icon </Alert>
    <Alert Color="AlertColor.Success"> <Icon Name="IconName.CheckCircleFill" class="me-2"></Icon>A simple success alert with an icon </Alert>
    <Alert Color="AlertColor.Danger"> <Icon Name="IconName.ExclamationTriangleFill" class="me-2"></Icon>A simple danger alert with an icon </Alert>
    <Alert Color="AlertColor.Warning"> <Icon Name="IconName.ExclamationTriangleFill" class="me-2"></Icon>A simple warning alert with an icon </Alert>
</div>

Dismissing

Using the Dismissable="true", it's possible to dismiss any alert inline.

<div>
    <Alert Color="AlertColor.Warning" Dismissable="true"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. </Alert>
</div>

Manually we can close an alert with button click.

<div>
    <Alert @ref="warningAlert" Color="AlertColor.Warning">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below. <Button Color="ButtonColor.Primary" @onclick="CloseAlert">Close</Button>
    </Alert>
</div>

Blazor Bootstrap Links:

1. Blazor Bootstrap: Quick Start
2. Blazor Bootstrap: Alert Component Examples
3. Blazor Bootstrap: Buttons Examples
4. Blazor Bootstrap: Icons Component Examples
5. Blazor Bootstrap: Modal Component Examples
6. Blazor Bootstrap: Offcanvas Component Example
7. Blazor Bootstrap: Toasts Component Examples
8. Blazor Bootstrap: Tooltip Component Examples