Alerts

Basic Alert 
<div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
    </div>

    <div class="alert alert-secondary" role="alert">
        A simple secondary alert—check it out!
    </div>

    <div class="alert alert-success" role="alert">
        A simple success alert—check it out!
    </div>

    <div class="alert alert-danger" role="alert">
        A simple danger alert—check it out!
    </div>

    <div class="alert alert-warning" role="alert">
        A simple warning alert—check it out!
    </div>

    <div class="alert alert-info" role="alert">
        A simple info alert—check it out!
    </div>

    <div class="alert alert-light" role="alert">
        A simple light alert—check it out!
    </div>

    <div class="alert alert-dark" role="alert">
        A simple dark alert—check it out!
    </div>
Basic Alerts with Links 
<div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-secondary" role="alert">
        A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>. Give it a click if you like.
    </div>

    <div class="alert alert-success" role="alert">
        A simple success alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-danger" role="alert">
        A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-warning" role="alert">
        A simple warning alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-info" role="alert">
        A simple info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-light" role="alert">
        A simple light alert with <a href="javascript:void(0);" class="alert-link">an example
            link</a>.
        Give it a click if you like.
    </div>

    <div class="alert alert-dark" role="alert">
        A simple dark alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
        Give it a click if you like.
    </div>
Solid Colored Alerts
A simple solid primary alert—check it out!
A simple solid secondary alert—check it out!
A simple solid info alert—check it out!
A simple solid warning alert—check it out!
A simple solid success alert—check it out!
A simple solid danger alert—check it out!
A simple solid light alert—check it out!
A simple solid dark alert—check it out! 
<div class="alert alert-solid-primary alert-dismissible fade show">
        A simple solid primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-secondary alert-dismissible fade show">
        A simple solid secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-info alert-dismissible fade show">
        A simple solid info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-warning alert-dismissible fade show">
        A simple solid warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-success alert-dismissible fade show">
        A simple solid success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-danger alert-dismissible fade show">
        A simple solid danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-light alert-dismissible fade show">
        A simple solid light alert—check it out!
        <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-dark alert-dismissible fade show text-white">
        A simple solid dark alert—check it out!
        <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
Outline Alerts
A simple outline primary alert—check it out!
A simple outline secondary alert—check it out!
A simple outline info alert—check it out!
A simple outline warning alert—check it out!
A simple outline success alert—check it out!
A simple outline danger alert—check it out!
A simple outline light alert—check it out!
A simple outline dark alert—check it out! 
<div class="alert alert-solid-primary alert-dismissible fade show">
        A simple solid primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-secondary alert-dismissible fade show">
        A simple solid secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-info alert-dismissible fade show">
        A simple solid info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-warning alert-dismissible fade show">
        A simple solid warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-success alert-dismissible fade show">
        A simple solid success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-danger alert-dismissible fade show">
        A simple solid danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-light alert-dismissible fade show">
        A simple solid light alert—check it out!
        <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-dark alert-dismissible fade show text-white">
        A simple solid dark alert—check it out!
        <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
Rounded Solid Colores Alerts
A simple solid rounded primary alert—check it out!
A simple solid rounded secondary alert—check it out!
A simple solid rounded warning alert—check it out!
A simple solid rounded danger alert—check it out!
A simple solid rounded info alert—check it out!
A simple solid rounded success alert—check it out!
A simple solid rounded light alert—check it out!
A simple solid rounded dark alert—check it out! 
<div class="alert alert-solid-primary rounded-pill alert-dismissible fade show">
        A simple solid rounded primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-secondary rounded-pill alert-dismissible fade show">
        A simple solid rounded secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-warning rounded-pill alert-dismissible fade show">
        A simple solid rounded warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-solid-danger rounded-pill alert-dismissible fade show">
        A simple solid rounded danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-solid-info rounded-pill alert-dismissible fade show">
        A simple solid rounded info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-solid-success rounded-pill alert-dismissible fade show">
        A simple solid rounded success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-solid-light rounded-pill alert-dismissible fade show">
        A simple solid rounded light alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-solid-dark rounded-pill alert-dismissible fade show">
        A simple solid rounded dark alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
Rounded Outline Alerts
A simple outline rounded primary alert—check it out!
A simple outline rounded secondary alert—check it out!
A simple outline rounded warning alert—check it out!
A simple outline rounded danger alert—check it out!
A simple outline rounded info alert—check it out!
A simple outline rounded success alert—check it out!
A simple outline rounded light alert—check it out!
A simple outline rounded dark alert—check it out! 
<div class="alert alert-outline-primary rounded-pill alert-dismissible fade show">
        A simple outline rounded primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-outline-secondary rounded-pill alert-dismissible fade show">
        A simple outline rounded secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-outline-warning rounded-pill alert-dismissible fade show">
        A simple outline rounded warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-outline-danger rounded-pill alert-dismissible fade show">
        A simple outline rounded danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-outline-info rounded-pill alert-dismissible fade show">
        A simple outline rounded info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-outline-success rounded-pill alert-dismissible fade show">
        A simple outline rounded success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-outline-light rounded-pill alert-dismissible fade show">
        A simple outline rounded light alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
    <div class="alert alert-outline-dark rounded-pill alert-dismissible fade show">
        A simple outline rounded dark alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
Solid Colored Alerts With Image 
<div class="alert alert-img alert-solid-primary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-solid-secondary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-solid-warning alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-solid-danger alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-solid-info alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-light alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/10.jpg" alt="img">
        </div>
        <div>A simple light alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-solid-dark alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/15.jpg" alt="img">
        </div>
        <div>A simple dark alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x text-muted"></i></button>
    </div>
Outline Alerts With Image 
<div class="alert alert-img alert-outline-primary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-secondary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-warning alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-danger alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-info alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-light alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/10.jpg" alt="img">
        </div>
        <div>A simple light alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img alert-outline-dark alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/15.jpg" alt="img">
        </div>
        <div>A simple dark alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x text-muted"></i></button>
    </div>
Rounded Solid Colored Alerts With Image 
<div class="alert alert-img rounded-pill alert-solid-primary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-secondary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-warning alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-danger alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-info alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-light alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/10.jpg" alt="img">
        </div>
        <div>A simple light alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-solid-dark alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/15.jpg" alt="img">
        </div>
        <div>A simple dark alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x text-muted"></i></button>
    </div>
Rounded Outline Alerts With Image 
<div class="alert alert-img rounded-pill alert-outline-primary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-secondary alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-warning alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-danger alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-info alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-light alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/10.jpg" alt="img">
        </div>
        <div>A simple light alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-img rounded-pill alert-outline-dark alert-dismissible fase show  flex-wrap" role="alert">
        <div class="avatar avatar-xs avatar-rounded me-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/15.jpg" alt="img">
        </div>
        <div>A simple dark alert with image—check it out!</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x text-muted"></i></button>
    </div>
Alerts with icons 
<div class="alert alert-primary d-flex align-items-center" role="alert">
        <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>
    </div>

    <div class="alert alert-success d-flex align-items-center" role="alert">
        <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>
    </div>

    <div class="alert alert-warning d-flex align-items-center" role="alert">
        <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>
    </div>

    <div class="alert alert-danger d-flex align-items-center" role="alert">
        <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>
    </div>
Customized Alerts With SVG's 
<div class="alert alert-primary alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
        <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
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-secondary alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
        <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
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-warning alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
        <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
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="alert alert-danger alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
        <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
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>
Alerts With Description
Cannot connect to the database
We are unable to save any progress at this time.
<div class="alert 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<button type="button" class="btn-close p-0" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button></div>
                <div class="fs-12 op-8 mb-1">We are unable to save any progress at this time.</div>
            </div>
        </div>
    </div>
Alerts With Link on Right
A new software update is available. See what's new in version 3.0.7
Details 
<div 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>
    </div>
Alerts With Actions
YouTube would like you to send notifications
Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
Don't allow Allow 
<div 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<button type="button" class="btn-close p-0" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button></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>
    </div>
Alerts With List
A problem has been occurred while submitting your data.
  • This username is already in use
  • Email field can't be empty
  • Please enter a valid phone number
<div 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>
    </div>
Alerts With Dismissable
File has been successfully uploaded.
<div 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.<button type="button" class="btn-close p-0" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button></div>
            </div>
        </div>
    </div>;
Alerts With Discovery
New version published
Chris Lynch published a new version of this page. Refresh to see the changes.
<div 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>
    </div>