Switcher

Theme Color Mode:

Directions:

Theme Primary:

reset:

Sign In Sign Up

Alerts

Basic Alert 
<BSAlert Color="BSColor.Primary">
    A simple primary alert—check it out!
</div>

<BSAlert Color="BSColor.Secondary">
    A simple secondary alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Success">
    A simple success alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Danger">
    A simple danger alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Warning">
    A simple warning alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Info">
    A simple info alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Light">
    A simple light alert—check it out!
</BSAlert>

<BSAlert Color="BSColor.Dark">
    A simple dark alert—check it out!
</BSAlert>
Basic Alerts with Links 
<BSAlert Color="BSColor.Primary">
    A simple primary alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Secondary">
    A simple secondary alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink> Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Success">
    A simple success alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Danger">
    A simple danger alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Warning">
    A simple warning alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Info">
    A simple info alert with <BSAlertLink Url="javascript:void();">an example link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Light">
    A simple light alert with <BSAlertLink Url="javascript:void();">an example
        link</BSAlertLink>
    Give it a click if you like.
</BSAlert>

<BSAlert Color="BSColor.Dark">
    A simple dark alert with <BSAlertLink Url="javascript:void();">an example link</BSAlertLink>
    Give it a click if you like.
</BSAlert>
Solid Colored Alerts 
<BSAlert Class="alert-solid-primary fade show" IsDismissible="true">
    A simple solid primary alert—check it out!
</BSAlert>

<BSAlert Class="alert-solid-Secondary fade show" IsDismissible="true">
    A simple solid secondary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Info fade show" IsDismissible="true">
    A simple solid info alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Warning fade show" IsDismissible="true">
    A simple solid warning alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Success fade show" IsDismissible="true">
    A simple solid success alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Danger fade show" IsDismissible="true">
    A simple solid danger alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Light fade show" IsDismissible="true">
    A simple solid light alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Dark fade show" IsDismissible="true">
    A simple solid dark alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
Outline Alerts 
<BSAlert Class="alert-outline-primary fade show" IsDismissible="true">
    A simple outline primary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Secondary fade show" IsDismissible="true">
    A simple outline secondary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Info fade show" IsDismissible="true">
    A simple outline info alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Warning fade show" IsDismissible="true">
    A simple outline warning alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Success fade show" IsDismissible="true">
    A simple outline success alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Danger fade show" IsDismissible="true">
    A simple outline danger alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Light fade show" IsDismissible="true">
    A simple outline light alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Dark fade show" IsDismissible="true">
    A simple outline dark alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
Rounded Solid Colors Alerts 
<BSAlert Class="alert-solid-primary rounded-pill fade show" IsDismissible="true">
    A simple solid rounded primary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Secondary rounded-pill fade show" IsDismissible="true">
    A simple solid rounded secondary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Warning rounded-pill fade show" IsDismissible="true">
    A simple solid rounded warning alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Danger rounded-pill fade show" IsDismissible="true">
    A simple solid rounded danger alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-solid-Info rounded-pill fade show" IsDismissible="true">
    A simple solid rounded info alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-solid-Success rounded-pill fade show" IsDismissible="true">
    A simple solid rounded success alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-solid-Light rounded-pill fade show" IsDismissible="true">
    A simple solid rounded light alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-solid-Dark rounded-pill fade show" IsDismissible="true">
    A simple solid rounded dark alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
Rounded Outline Alerts 
<BSAlert Class="alert-outline-primary rounded-pill fade show" IsDismissible="true">
    A simple outline rounded primary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Secondary rounded-pill fade show" IsDismissible="true">
    A simple outline rounded secondary alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Warning rounded-pill fade show" IsDismissible="true">
    A simple outline rounded warning alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Danger rounded-pill fade show" IsDismissible="true">
    A simple outline rounded danger alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Info rounded-pill fade show" IsDismissible="true">
    A simple outline rounded info alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-outline-Success rounded-pill fade show" IsDismissible="true">
    A simple outline rounded success alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-outline-Light rounded-pill fade show" IsDismissible="true">
    A simple outline rounded light alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
<BSAlert Class="alert-outline-Dark rounded-pill fade show" IsDismissible="true">
    A simple outline rounded dark alert—check it out!
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
Solid Colored Alerts With Image 
<BSAlert Class="alert-solid-primary alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/3.jpg" alt="img">
    </div>
    <div>A simple solid primary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Secondary alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/5.jpg" alt="img">
    </div>
    <div>A simple solid secondary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Warning alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/8.jpg" alt="img">
    </div>
    <div>A simple solid warning alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Danger alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/11.jpg" alt="img">
    </div>
    <div>A simple solid danger alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Info alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/13.jpg" alt="img">
    </div>
    <div>A simple solid info alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Light alert-img flex-wrap">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/10.jpg" alt="img">
    </div>
    <div>A simple solid light alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Dark alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/15.jpg" alt="img">
    </div>
    <div>A simple solid dark alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x text-muted"></i></BSButton>
</BSAlert>
Outline Alerts With Image 
<BSAlert Class="alert-outline-primary alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/3.jpg" alt="img">
    </div>
    <div>A simple outline primary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Secondary alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/5.jpg" alt="img">
    </div>
    <div>A simple outline secondary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Warning alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/8.jpg" alt="img">
    </div>
    <div>A simple outline warning alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Danger alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/11.jpg" alt="img">
    </div>
    <div>A simple outline danger alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Info alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/13.jpg" alt="img">
    </div>
    <div>A simple outline info alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Light alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/10.jpg" alt="img">
    </div>
    <div>A simple outline light alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Dark alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs me-3">
        <img Source="https://broker-exchange.net/assets/img/users/15.jpg" alt="img">
    </div>
    <div>A simple outline dark alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x text-muted"></i></BSButton>
</BSAlert>
Rounded Solid Colored Alerts With Image 
<BSAlert Class="alert-solid-primary rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/3.jpg" alt="img">
    </div>
    <div>A simple solid rounded primary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Secondary rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/5.jpg" alt="img">
    </div>
    <div>A simple solid rounded secondary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Warning rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/8.jpg" alt="img">
    </div>
    <div>A simple solid rounded warning alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Danger rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/11.jpg" alt="img">
    </div>
    <div>A simple solid rounded danger alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Info rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/13.jpg" alt="img">
    </div>
    <div>A simple solid rounded info alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Light rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/10.jpg" alt="img">
    </div>
    <div>A simple solid rounded light alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-solid-Dark rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/15.jpg" alt="img">
    </div>
    <div>A simple solid rounded dark alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x text-muted"></i></BSButton>
</BSAlert>
Rounded Outline Alerts With Image 
<BSAlert Class="alert-outline-primary rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/3.jpg" alt="img">
    </div>
    <div>A simple outline rounded primary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Secondary rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/5.jpg" alt="img">
    </div>
    <div>A simple outline rounded secondary alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Warning rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/8.jpg" alt="img">
    </div>
    <div>A simple outline rounded warning alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Danger rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/11.jpg" alt="img">
    </div>
    <div>A simple outline rounded danger alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Info rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/13.jpg" alt="img">
    </div>
    <div>A simple outline rounded info alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Light rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/10.jpg" alt="img">
    </div>
    <div>A simple outline rounded light alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-outline-Dark rounded-pill alert-img flex-wrap fade show" IsDismissible="true">
    <div class="avatar avatar-xs avatar-rounded me-3">
        <img Source="https://broker-exchange.net/assets/img/users/15.jpg" alt="img">
    </div>
    <div>A simple outline rounded dark alert with image—check it out!</div>
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x text-muted"></i></BSButton>
</BSAlert>
Alerts with icons 
<BSAlert Color="BSColor.Info" HasIcon="true">
    <svg class="flex-shrink-0 me-2 svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
    <div>
        An example alert with an icon
    </div>
</BSAlert>

<BSAlert Color="BSColor.Success" HasIcon="true">
    <svg class="flex-shrink-0 me-2 svg-success" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
    <div>
        An example success alert with an icon
    </div>
</BSAlert>

<BSAlert Color="BSColor.Warning" HasIcon="true">
    <svg class="flex-shrink-0 me-2 svg-warning" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M12,5.99L19.53,19H4.47L12,5.99 M12,2L1,21h22L12,2L12,2z"/><polygon points="13,16 11,16 11,18 13,18"/><polygon points="13,10 11,10 11,15 13,15"/></g></g></g></svg>
    <div>
        An example warning alert with an icon
    </div>
</BSAlert>

<BSAlert Color="BSColor.Danger" HasIcon="true">
    <svg class="flex-shrink-0 me-2 svg-danger" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M15.73,3H8.27L3,8.27v7.46L8.27,21h7.46L21,15.73V8.27L15.73,3z M19,14.9L14.9,19H9.1L5,14.9V9.1L9.1,5h5.8L19,9.1V14.9z"/><rect height="6" width="2" x="11" y="7"/><rect height="2" width="2" x="11" y="15"/></g></g></g></svg>
    <div>
        An example danger alert with an icon
    </div>
</BSAlert>
Customized Alerts With SVG 
<BSAlert Class="alert-primary custom-alert-icon shadow-sm fade show" IsDismissible="true">
    <svg class="svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    A customized primary alert with an icon
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-Secondary custom-alert-icon shadow-sm fade show" IsDismissible="true">
    <svg class="svg-secondary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
    A customized secondary alert with an icon
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-Warning custom-alert-icon shadow-sm fade show" IsDismissible="true">
    <svg class="svg-warning" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
    A customized warning alert with an icon
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>

<BSAlert Class="alert-Danger custom-alert-icon shadow-sm fade show" IsDismissible="true">
    <svg class="svg-danger" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
    A customized danger alert with an icon
    <BSButton Class="btn-close" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton>
</BSAlert>
Alerts With Description 
<BSAlert Class="alert-warning border border-warning mb-0 p-2">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-yellow-400 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
              </svg>
         </div>
        <div class="text-warning w-100">
            <div class="fw-semibold d-flex justify-content-between">Cannot connect to the database<BSButton Class="btn-close p-0" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton></div>
            <div class="fs-12 op-8 mb-1">We are unable to save any progress at this time.</div>
        </div>
    </div>
</BSAlert>
Alerts With Link on Right 
<BSAlert Class="alert alert-light border border mb-0 p-2">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-gray-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#64748b" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
              </svg>
         </div>
        <div class="text-muted w-100">
            <div class="d-flex justify-content-between">A new software update is available. See what's new in version 3.0.7</div>
         </div>
         <a href="javascript:void(0);" class="ms-auto">Details</a>
    </div>
</BSAlert>
Alerts With Actions 
<BSAlert Class="alert alert-primary border border-primary mb-0 p-2">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-primary mt-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
              </svg>
         </div>
        <div class="w-100">
            <div class="fw-semibold d-flex justify-content-between">YouTube would like you to send notifications<BSButton Class="btn-close p-0" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton></div>
            <div class="fs-12 op-8 mb-1">Notifications may include alerts, sounds and icon badges. These can be configured in Settings.</div>
               <div class="mt-2">
                    <a href="javascript:void(0);" class="text-primary fw-semibold text-decoration-underline me-4">Don't allow</a>
                    <a href="javascript:void(0);" class="text-primary fw-semibold text-decoration-underline">Allow</a>
               </div>
        </div>
    </div>
</BSAlert>
Alerts With List 
<BSAlert Class="alert alert-danger border border-red mb-0 p-2">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-red mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
              </svg>
         </div>
        <div class="w-100 text-red">
            <div class="fw-semibold d-flex justify-content-between">A problem has been occurred while submitting your data.</div>
               <ul class="mt-2">
                    <li  class="">This username is already in use</li>
                    <li  class="">Email field can't be empty</li>
                    <li  class="">Please enter a valid phone number</li>
               </ul>
        </div>
    </div>
</BSAlert>
Alerts With Dismissable 
<BSAlert Class="alert alert-teal border border-teal mb-0 p-2">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-teal-400 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#28c2c2" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
              </svg>
         </div>
        <div class="text-teal w-100">
            <div class="fw-semibold d-flex justify-content-between">File has been successfully uploaded.<BSButton Class="btn-close p-0" @onclick="() => CloseAlert()"><i class="bi bi-x"></i></BSButton></div>
         </div>
    </div>
</BSAlert>;
Alerts With Discovery 
<BSAlert Class="alert border mb-0 p-3">
    <div class="d-flex align-items-start">
        <div class="me-2">
            <svg class="h-4 w-4 text-primary mt-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
              </svg>
         </div>
        <div class="">
            <div class="fw-semibold d-flex justify-content-between">New version published</div>
            <div class="fs-12 op-8 mb-1">Chris Lynch published a new version of this page. Refresh to see the changes.</div>
        </div>
    </div>
</BSAlert>
Copyright © 2025 Broker Exchange.