هشدارها

هشدارهای اساسی 1


<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 mb-0" role="alert">
    یک هشدار تاریک ساده - آن را بررسی کنید!
</div>

هشدارهای اساسی 2


<div class="alert alert-primary bg-primary text-white" role="alert">
	یک هشدار اولیه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-secondary bg-secondary text-white" role="alert">
	یک هشدار ثانویه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-success bg-success text-white" role="alert">
	یک هشدار موفقیت ساده - آن را بررسی کنید!
</div>
<div class="alert alert-danger bg-danger text-white" role="alert">
	یک هشدار خطر ساده - آن را بررسی کنید!
</div>
<div class="alert alert-warning bg-warning text-white" role="alert">
	یک هشدار ساده - آن را بررسی کنید!
</div>
<div class="alert alert-info bg-info text-white" role="alert">
	یک هشدار اطلاعات ساده - آن را بررسی کنید!
</div>
<div class="alert alert-light bg-light text-dark" role="alert">
	یک هشدار نوری ساده - آن را بررسی کنید!
</div>
<div class="alert alert-dark mb-0 bg-dark text-white" role="alert">
	یک هشدار تاریک ساده - آن را بررسی کنید!
</div>

هشدارهای طرح کلی


<div class="alert alert-primary bg-transparent text-primary" role="alert">
	یک هشدار اولیه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-secondary bg-transparent text-secondary" role="alert">
	یک هشدار ثانویه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-success bg-transparent text-success" role="alert">
	یک هشدار موفقیت ساده - آن را بررسی کنید!
</div>
<div class="alert alert-danger bg-transparent text-danger" role="alert">
	یک هشدار خطر ساده - آن را بررسی کنید!
</div>
<div class="alert alert-warning bg-transparent text-warning" role="alert">
	یک هشدار ساده - آن را بررسی کنید!
</div>
<div class="alert alert-info bg-transparent text-info" role="alert">
	یک هشدار اطلاعات ساده - آن را بررسی کنید!
</div>
<div class="alert alert-light bg-transparent text-light" role="alert">
	یک هشدار نوری ساده - آن را بررسی کنید!
</div>
<div class="alert alert-dark mb-0 bg-transparent text-dark" role="alert">
	یک هشدار تاریک ساده - آن را بررسی کنید!
</div>

هشدارهای طرح کلی


<div class="alert alert-primary text-primary" role="alert">
	یک هشدار اولیه ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-secondary text-secondary" role="alert">
	یک هشدار ثانویه ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-success text-success" role="alert">
	یک هشدار موفقیت ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-danger text-danger" role="alert">
	یک هشدار خطر ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-warning text-warning" role="alert">
	یک هشدار ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-info text-info" role="alert">
	یک هشدار اطلاعات ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-light text-light" role="alert">
	یک هشدار نور ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>
<div class="alert alert-dark text-dark mb-0" role="alert">
	یک هشدار تاریک ساده با <a href="#" class="fw-semibold">یک لینک نمونه</a>. بر روی آن کلیک کنید.
</div>

هشدار با نماد


<div class="alert alert-primary text-primary" role="alert">
	<i class="ri-home-7-line fs-18 me-1"></i>
	یک هشدار اولیه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-secondary text-secondary" role="alert">
	<i class="ri-star-line fs-18 me-1"></i>
	یک هشدار ثانویه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-success text-success" role="alert">
	<i class="ri-play-circle-line fs-18 me-1"></i>
	یک هشدار موفقیت ساده - آن را بررسی کنید!
</div>
<div class="alert alert-danger text-danger" role="alert">
	<i class="ri-service-line fs-18 me-1"></i>
	یک هشدار خطر ساده - آن را بررسی کنید!
</div>
<div class="alert alert-warning text-warning" role="alert">
	<i class="ri-edit-box-line fs-18 me-1"></i>
	یک هشدار ساده - آن را بررسی کنید!
</div>
<div class="alert alert-info text-info" role="alert">
	<i class="ri-table-line fs-18 me-1"></i>
	یک هشدار اطلاعات ساده - آن را بررسی کنید!
</div>
<div class="alert alert-light text-light" role="alert">
	<i class="ri-code-s-slash-fill fs-18 me-1"></i>
	یک هشدار نوری ساده - آن را بررسی کنید!
</div>
<div class="alert alert-dark text-dark mb-0" role="alert">
	<i class="ri-html5-line fs-18 me-1"></i>
	یک هشدار تاریک ساده - آن را بررسی کنید!
</div>

هشدارها با نماد


<div class="alert alert-primary bg-primary text-white" role="alert">
	<i class="ri-home-7-line fs-18 me-1"></i>
	یک هشدار اولیه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-secondary bg-secondary text-white" role="alert">
	<i class="ri-star-line fs-18 me-1"></i>
	یک هشدار ثانویه ساده - آن را بررسی کنید!
</div>
<div class="alert alert-success bg-success text-white" role="alert">
	<i class="ri-play-circle-line fs-18 me-1"></i>
	یک هشدار موفقیت ساده - آن را بررسی کنید!
</div>
<div class="alert alert-danger bg-danger text-white" role="alert">
	<i class="ri-service-line fs-18 me-1"></i>
	یک هشدار خطر ساده - آن را بررسی کنید!
</div>
<div class="alert alert-warning bg-warning text-white" role="alert">
	<i class="ri-edit-box-line fs-18 me-1"></i>
	یک هشدار ساده - آن را بررسی کنید!
</div>
<div class="alert alert-info bg-info text-white" role="alert">
	<i class="ri-table-line fs-18 me-1"></i>
	یک هشدار اطلاعات ساده - آن را بررسی کنید!
</div>
<div class="alert alert-light bg-light text-white" role="alert">
	<i class="ri-code-s-slash-fill fs-18 me-1"></i>
	یک هشدار نوری ساده - آن را بررسی کنید!
</div>
<div class="alert alert-dark bg-dark text-white mb-0" role="alert">
	<i class="ri-html5-line fs-18 me-1"></i>
	یک هشدار تاریک ساده - آن را بررسی کنید!
</div>

رد کردن هشدارها


<div class="alert alert-primary alert-dismissible" role="alert">
	یک هشدار اولیه ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible" role="alert">
	یک هشدار ثانویه ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
	یک هشدار موفقیت ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
	یک هشدار خطر ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
	یک هشدار ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
	یک هشدار اطلاعات ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible" role="alert">
	یک هشدار نوری ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible" role="alert">
	یک هشدار تاریک ساده - آن را بررسی کنید!
	<button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

هشدارهای محتوای اضافی


<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">انجام شد!</h4>
	<p>لورم ایپسوم به سادگی ساختار چاپ و متن را در بر می گیرد. لورم ایپسوم به مدت 40 سال استاندارد صنعت بوده است.</p>
	<hr>
	<p class="mb-0">هر زمان که نیاز داشتید، حتما از ابزارهای حاشیه استفاده کنید تا همه چیز را زیبا و مرتب نگه دارید.</p>
</div>