مونو انواع مختلفی از کامپوننت‌های هشدار بوت استرپ را با کمی سفارشی‌سازی متناسب با استانداردهای طراحی خود ارائه می‌دهد. برای اطلاعات بیشتر، لطفاً به مستندات رسمی بوت استرپ مراجعه کنید.

هشدارهای پیش‌فرض


<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 alert-outlined" role="alert">
                یک نمونه هشدار رنگهای اصلی - آن را بررسی کنید!
  </div>

  <div class="alert alert-secondary alert-outlined" role="alert">
                یک نمونه هشدار رنگهای ثانویه - آن را بررسی کنید!
  </div>

  <div class="alert alert-success alert-outlined" role="alert">
                یک نمونه هشدار موفقیت - آن را بررسی کنید!
  </div>

  <div class="alert alert-danger alert-outlined" role="alert">
                یک نمونه هشدار خطر - آن را بررسی کنید!
  </div>

  <div class="alert alert-warning alert-outlined" role="alert">
                یک نمونه هشدار اخطار - آن را بررسی کنید!
  </div>

  <div class="alert alert-info alert-outlined" role="alert">
    یک نمونه هشدار اطلاعاتی - آن را بررسی کنید!
  </div>

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

  <div class="alert alert-dark alert-outlined" role="alert">
    یک نمونه هشدار تیره —حتماً ببینید!
  </div>
        
                        

هشدارهای قابل بسته شدن

                
<div class="alert alert-primary alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-secondary alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-light alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-dark alert-dismissible fade show" role="alert">
  <strong>سلام دوست من!</strong> شما باید برخی از فیلدهای زیر را بررسی کنید.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>
                
              

هشدارها با آیکون‌ها

                        
<div class="alert alert-primary alert-icon" role="alert">
  <i class="mdi mdi-bell-outline"></i> یک نمونه هشدار رنگهای اصلی - آن را بررسی کنید!
</div>

<div class="alert alert-secondary alert-icon" role="alert">
  <i class="mdi mdi-alert"></i> یک نمونه هشدار رنگهای ثانویه - آن را بررسی کنید!
</div>

<div class="alert alert-success alert-icon" role="alert">
  <i class="mdi mdi-checkbox-marked-outline"></i> یک نمونه هشدار موفقیت - آن را بررسی کنید!
</div>

<div class="alert alert-danger alert-icon" role="alert">
  <i class="mdi mdi-diameter-variant"></i>یک نمونه هشدار خطر - آن را بررسی کنید!
</div>

<div class="alert alert-warning alert-icon" role="alert">
  <i class="mdi mdi-alert-decagram-outline"></i>یک نمونه هشدار اخطار - آن را بررسی کنید!
</div>

<div class="alert alert-info alert-icon" role="alert">
  <i class="mdi mdi-alert-circle-outline"></i> یک نمونه هشدار اطلاعاتی - آن را بررسی کنید!
</div>

<div class="alert alert-light alert-icon" role="alert">
  <i class="mdi mdi-account-edit"></i> یک نمونه هشدار روشن —حتماً ببینید!
</div>

<div class="alert alert-dark alert-icon" role="alert">
  <i class="mdi mdi-crosshairs-gps"></i> یک نمونه هشدار تیره —حتماً ببینید!
</div>
                        
                      

مخاطبین

افزودن مخاطب جدید