Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="Primary">A simple primary alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Secondary">A simple secondary alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Success">A simple success alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Danger">A simple danger alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Warning">A simple warning alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Info">A simple info alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Light">A simple light alert—check it out!</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Dark">A simple dark alert—check it out!</bs-alert>

Link color

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="Primary">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Secondary">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>.
</bs-alert>

Additional content

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="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>
</bs-alert>

Dismissing

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="Warning">
  A simple warning alert—check it out!
  <bs-close-button />
</bs-alert>
Use <bs-close-button /> inside an alert to make it dismissible. The alert includes alert-dismissible, fade, and show classes automatically when a close button is present.

Icons

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="Primary" display="Flex" align-items="Center">
  <bs-icon stack="this.Html.GetStack()" icon="InfoCircleFill" class="flex-shrink-0" end-margin="Default2" aria-label="Info:" />
  <bs-div> An example alert with an icon </bs-div>
</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Success" display="Flex" align-items="Center">
  <bs-icon stack="this.Html.GetStack()" icon="CheckCircleFill" class="flex-shrink-0" end-margin="Default2" aria-label="Success:" />
  <bs-div> An example success alert with an icon </bs-div>
</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Warning" display="Flex" align-items="Center">
  <bs-icon stack="this.Html.GetStack()" icon="ExclamationTriangleFill" class="flex-shrink-0" end-margin="Default2" aria-label="Warning:" />
  <bs-div> An example warning alert with an icon </bs-div>
</bs-alert>
<bs-alert stack="this.Html.GetStack()" alert-type="Danger" display="Flex" align-items="Center">
  <bs-icon stack="this.Html.GetStack()" icon="ExclamationTriangleFill" class="flex-shrink-0" end-margin="Default2" aria-label="Danger:" />
  <bs-div> An example danger alert with an icon </bs-div>
</bs-alert>
Uses <bs-icon /> to render Bootstrap Icons inside alerts. Combine with flex utilities for proper alignment.

Events

aspnet 

<bs-alert stack="this.Html.GetStack()" alert-type="Warning"
          on-close="console.log('Alert close', event)"
          on-closed="console.log('Alert closed', event)">
  Dismiss me to see events.
  <bs-close-button />
</bs-alert>
These map to close.bs.alert and closed.bs.alert.