اعلان‌ها

<div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <strong>واو!</strong> شما باید به برخی از فیلدهای زیر توجه کنید.
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="بستن"><i class="bi bi-x"></i></button>
                                </div>
                                

<div id="liveAlertPlaceholder">
    <div class="mb-2"></div>
    <div class="mb-2"></div>
    <div class="mb-2"></div>
    <div class="mb-2"></div>
</div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">نمایش اعلان زنده
</button>

<div class="alert alert-solid-primary alert-dismissible fade show">
    یک اعلان اولیه ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان ثانویه ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان اطلاعاتی ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان اخطاری ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان موفقیت‌آمیز ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان خطرناک ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان روشن ساده با پس‌زمینه ثابت — امتحانش کنید!
    <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">
    یک اعلان تاریک ساده با پس‌زمینه ثابت — امتحانش کنید!
    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-primary shadow-sm alert-dismissible fade show">
    یک اعلان اولیه ساده با سایه کوچک — امتحانش کنید!
    <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-primary shadow alert-dismissible fade show">
    یک اعلان اولیه ساده با سایه معمولی — امتحانش کنید!
    <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-primary shadow-lg alert-dismissible fade show">
    یک اعلان اولیه ساده با سایه بزرگ — امتحانش کنید!
    <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 shadow-sm alert-dismissible fade show">
    یک اعلان ثانویه ساده با سایه کوچک — امتحانش کنید!
    <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 shadow alert-dismissible fade show">
    یک اعلان ثانویه ساده با سایه معمولی — امتحانش کنید!
    <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 shadow-lg alert-dismissible fade show">
    یک اعلان ثانویه ساده با سایه بزرگ — امتحانش کنید!
    <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-primary shadow-sm">یک اعلان اولیه ساده با سایه کوچک — امتحانش کنید!</div>

<div class="alert alert-primary shadow">یک اعلان اولیه ساده با سایه معمولی — امتحانش کنید!</div>

<div class="alert alert-primary shadow-lg">یک اعلان اولیه ساده با سایه بزرگ — امتحانش کنید!</div>

<div class="alert alert-secondary shadow-sm">یک اعلان ثانویه ساده با سایه کوچک — امتحانش کنید!</div>

<div class="alert alert-secondary shadow">یک اعلان ثانویه ساده با سایه معمولی — امتحانش کنید!</div>

<div class="alert alert-secondary shadow-lg">یک اعلان ثانویه ساده با سایه بزرگ — امتحانش کنید!</div>

<div class="alert alert-primary" role="alert">
    یک اعلان اولیه ساده — امتحانش کنید!
</div>

<div class="alert alert-secondary" role="alert">
    یک اعلان ثانویه ساده — امتحانش کنید!
</div>

<div class="alert alert-success" role="alert">
    یک اعلان موفقیت ساده — امتحانش کنید!
</div>

<div class="alert alert-danger" role="alert">
    یک اعلان خطر ساده — امتحانش کنید!
</div>

<div class="alert alert-warning" role="alert">
    یک اعلان هشدار ساده — امتحانش کنید!
</div>

<div class="alert alert-info" role="alert">
    یک اعلان اطلاعاتی ساده — امتحانش کنید!
</div>

<div class="alert alert-light" role="alert">
    یک اعلان روشن ساده — امتحانش کنید!
</div>

<div class="alert alert-dark" role="alert">
    یک اعلان تاریک ساده — امتحانش کنید!
</div>

<div class="alert alert-primary" role="alert">
    یک اعلان اولیه ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-secondary" role="alert">
    یک اعلان ثانویه ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-success" role="alert">
    یک اعلان موفقیت ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-danger" role="alert">
    یک اعلان خطر ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-warning" role="alert">
    یک اعلان هشدار ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-info" role="alert">
    یک اعلان اطلاعاتی ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-light" role="alert">
    یک اعلان روشن ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-dark" role="alert">
    یک اعلان تاریک ساده با <a href="javascript:void(0);" class="alert-link">یک لینک نمونه</a>.
    اگر دوست دارید روی آن کلیک کنید.
</div>

<div class="alert alert-solid-primary alert-dismissible fade show">
    یک اعلان اولیه ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary alert-dismissible fade show">
    یک اعلان ثانویه ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-info alert-dismissible fade show">
    یک اعلان اطلاعاتی ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning alert-dismissible fade show">
    یک اعلان هشدار ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-success alert-dismissible fade show">
    یک اعلان موفقیت ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger alert-dismissible fade show">
    یک اعلان خطر ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-light alert-dismissible fade show">
    یک اعلان روشن ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-dark alert-dismissible fade show text-white">
    یک اعلان تاریک ثابت ساده—آن را امتحان کنید!
    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-primary rounded-pill alert-dismissible fade show">
    یک اعلان اولیه ثابت گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary rounded-pill alert-dismissible fade show">
    یک اعلان ثانویه ثابت گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning rounded-pill alert-dismissible fade show">
    یک اعلان هشدار ثابت گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger rounded-pill alert-dismissible fade show">
    یک اعلان خطر ثابت گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-primary rounded-pill alert-dismissible fade show">
    یک اعلان حاشیه‌ای اولیه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-secondary rounded-pill alert-dismissible fade show">
    یک اعلان حاشیه‌ای ثانویه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-warning rounded-pill alert-dismissible fade show">
    یک اعلان حاشیه‌ای هشدار گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-danger rounded-pill alert-dismissible fade show">
    یک اعلان حاشیه‌ای خطر گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-primary rounded-pill alert-dismissible fade show">
    یک اعلان اولیه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-secondary rounded-pill alert-dismissible fade show">
    یک اعلان ثانویه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-warning rounded-pill alert-dismissible fade show">
    یک اعلان هشدار گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-danger rounded-pill alert-dismissible fade show">
    یک اعلان خطر گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-primary rounded-pill alert-dismissible fade show">
    یک اعلان اولیه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-secondary rounded-pill alert-dismissible fade show">
    یک اعلان ثانویه گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-warning rounded-pill alert-dismissible fade show">
    یک اعلان هشدار گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-danger rounded-pill alert-dismissible fade show">
    یک اعلان خطر گرد ساده—آن را امتحان کنید!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<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>
    یک اعلان سفارشی اولیه با آیکون
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><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>
    یک اعلان سفارشی ثانویه با آیکون
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><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>
    یک اعلان سفارشی هشدار با آیکون
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><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>
    یک اعلان سفارشی خطر با آیکون
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<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>
        یک هشدار نمونه با آیکن
    </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>
        یک هشدار موفقیت‌آمیز نمونه با آیکن
    </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>
        یک هشدار هشداردهنده نمونه با آیکن
    </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>
        یک هشدار خطر نمونه با آیکن
    </div>
</div>

<div class="alert alert-img alert-primary alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/3.jpg" alt="img">
    </div>
    <div>یک هشدار ساده اولیه با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-secondary alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/5.jpg" alt="img">
    </div>
    <div>یک هشدار ساده ثانویه با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-warning alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/8.jpg" alt="img">
    </div>
    <div>یک هشدار ساده هشداردهنده با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-danger alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/11.jpg" alt="img">
    </div>
    <div>یک هشدار ساده خطرناک با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-info alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/13.jpg" alt="img">
    </div>
    <div>یک هشدار ساده اطلاعاتی با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-light alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/10.jpg" alt="img">
    </div>
    <div>یک هشدار ساده روشن با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-img alert-dark alert-dismissible fade show rounded-pill flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3 avatar-rounded">
        <img src="/assets/images/faces/15.jpg" alt="img">
    </div>
    <div>یک هشدار ساده تاریک با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x text-muted"></i></button>
</div>

<div class="alert alert-img alert-primary alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar avatar-xs me-3">
        <img src="/assets/images/faces/3.jpg" alt="img">
    </div>
    <div>یک هشدار ساده اولیه با تصویر—آن را بررسی کنید!</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-secondary alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar avatar-sm me-3">
        <img src="/assets/images/faces/5.jpg" alt="img">
    </div>
    <div>یک هشدار ساده ثانویه با تصویر—آن را بررسی کنید!</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-warning alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar me-3">
        <img src="/assets/images/faces/8.jpg" alt="img">
    </div>
    <div>یک هشدار ساده با تصویر هشدار—آن را بررسی کنید!</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-danger alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar avatar-md me-3">
        <img src="/assets/images/faces/11.jpg" alt="img">
    </div>
    <div>یک هشدار ساده خطرناک با تصویر—آن را بررسی کنید!</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-info alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar avatar-lg me-3">
        <img src="/assets/images/faces/13.jpg" alt="img">
    </div>
    <div>یک هشدار ساده اطلاعاتی با تصویر—آن را بررسی کنید!</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-dark alert-dismissible fase show flex-wrap" role="alert">
    <div class="avatar avatar-xl me-3">
        <img src="/assets/images/faces/14.jpg" alt="img">
    </div>
    <div>یک هشدار ساده اطلاعاتی با تصویر—آن را بررسی کنید!</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x text-muted"></i></button>
</div>

<div class="col-xl-6">
    <div class="alert alert-primary overflow-hidden p-0" role="alert">
        <div class="p-3 bg-primary text-fixed-white d-flex justify-content-between">
            <h6 class="aletr-heading mb-0">از گزارش این موضوع متشکریم.</h6>
            <button type="button" class="btn-close p-0 text-fixed-white" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
        </div>
        <hr class="my-0">
        <div class="p-3">
            <p class="mb-0">از شما به خاطر اطلاع دادن از مشکل در الگو و هشدار درباره عواقب آینده تشکر می‌کنیم. <a href="javascript:void(0);" class="fw-medium text-decoration-underline">برای پشتیبانی برای سوالات مراجعه کنید؟</a></p>
        </div>
    </div>
</div>

<div class="col-xl-6">
    <div class="alert alert-secondary overflow-hidden p-0" role="alert">
        <div class="p-3 bg-secondary text-fixed-white d-flex justify-content-between">
            <h6 class="aletr-heading mb-0">از گزارش این موضوع متشکریم.</h6>
            <button type="button" class="btn-close p-0 text-fixed-white" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
        </div>
        <hr class="my-0">
        <div class="p-3">
            <p class="mb-0">از شما به خاطر اطلاع دادن از مشکل در الگو و هشدار درباره عواقب آینده تشکر می‌کنیم. <a href="javascript:void(0);" class="fw-medium text-decoration-underline">برای پشتیبانی برای سوالات مراجعه کنید؟</a></p>
        </div>
    </div>
</div>

<div class="col-xl-6">
    <div class="alert alert-success overflow-hidden p-0" role="alert">
        <div class="p-3 bg-success text-fixed-white d-flex justify-content-between">
            <h6 class="aletr-heading mb-0">از گزارش این موضوع متشکریم.</h6>
            <button type="button" class="btn-close p-0 text-fixed-white" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
        </div>
        <hr class="my-0">
        <div class="p-3">
            <p class="mb-0">از شما به خاطر اطلاع دادن از مشکل در الگو و هشدار درباره عواقب آینده تشکر می‌کنیم. <a href="javascript:void(0);" class="fw-medium text-decoration-underline">برای پشتیبانی برای سوالات مراجعه کنید؟</a></p>
        </div>
    </div>
</div>

<div class="col-xl-6">
    <div class="alert alert-warning overflow-hidden p-0" role="alert">
        <div class="p-3 bg-warning text-fixed-white d-flex justify-content-between">
            <h6 class="aletr-heading mb-0">از گزارش این موضوع متشکریم.</h6>
            <button type="button" class="btn-close p-0 text-fixed-white" data-bs-dismiss="alert" aria-label="بستن"><i class="bi bi-x"></i></button>
        </div>
        <hr class="my-0">
        <div class="p-3">
            <p class="mb-0">از شما به خاطر اطلاع دادن از مشکل در الگو و هشدار درباره عواقب آینده تشکر می‌کنیم. <a href="javascript:void(0);" class="fw-medium text-decoration-underline">برای پشتیبانی برای سوالات مراجعه کنید؟</a></p>
        </div>
    </div>
</div>