هشدار

هشدار پایه
    
      <div class="alert alert-primary" role="alert"> Simple primary alert -check it out  </div>
      <div class="alert alert-secondary " role="alert"> Simple secondary  alert -check it out  </div>
      <div class="alert alert-success " role="alert"> Simple success  alert -check it out  </div>
      <div class="alert alert-danger " role="alert"> Simple danger  alert -check it out  </div>
      <div class="alert alert-warning " role="alert"> Simple warning  alert -check it out  </div>
      <div class="alert alert-info " role="alert"> Simple info  alert -check it out  </div>
      <div class="alert alert-light " role="alert"> Simple light  alert -check it out  </div>
      <div class="alert alert-dark " role="alert"> Simple dark  alert -check it out  </div>
هشدار روشن با رنگ لینک
   
     <div class="alert alert-light-primary" role="alert"> Light primary color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-secondary " role="alert"> Light secondary color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-success " role="alert"> Light success color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-danger " role="alert"> Light danger color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-warning " role="alert"> Light warning color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-info " role="alert"> Light info color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-light " role="alert"> Light light color alert with <a class="alert-link">an example link</a> check it   </div>
     <div class="alert alert-light-dark " role="alert"> Light dark color alert with <a class="alert-link">an example link</a> check it   </div>
هشدار Outline
    
      <div class="alert alert-outline-primary" role="alert"> outline primary alert -check it out  </div>
      <div class="alert alert-outline-secondary " role="alert"> outline secondary  alert -check it out  </div>
      <div class="alert alert-outline-success " role="alert"> outline success  alert -check it out  </div>
      <div class="alert alert-outline-danger " role="alert"> outline danger  alert -check it out  </div>
      <div class="alert alert-outline-warning " role="alert"> outline warning  alert -check it out  </div>
      <div class="alert alert-outline-info " role="alert"> outline info  alert -check it out  </div>
      <div class="alert alert-outline-light " role="alert"> outline light  alert -check it out  </div>
      <div class="alert alert-outline-dark " role="alert"> outline dark  alert -check it out  </div>
هشدار با آیکون
                      
                        <div class="light-border-primary" role="alert"> alert -check it out  </div>
                        <div class="light-border-secondary " role="alert"> alert -check it out  </div>
                        <div class="light-border-success " role="alert"> alert -check it out  </div>
                        <div class="light-border-danger " role="alert">  alert -check it out  </div>
                        <div class="light-border-warning " role="alert"> alert -check it out  </div>
                        <div class="light-border-info " role="alert"> alert -check it out  </div>
                        <div class="light-border-light " role="alert"> alert -check it out  </div>
                        <div class="light-border-dark " role="alert"> alert -check it out  </div>
هشدار با حاشیه ابتدا
                      
                        
                          <div class="alert alert-border-primary" role="alert">
                             هشدار با حاشیه ابتدا - بررسی کنید!
                           </div>
                           <div class="alert alert-border-secondary" role="alert">
                             هشدار با حاشیه ابتدا - بررسی کنید!
                           </div>
                           <div class="alert alert-border-success" role="alert">
                             هشدار با حاشیه ابتدا - بررسی کنید!
                           </div>
هشدار با آیکن‌های برچسب (Label Icons)
                      
                      <div class="alert alert-label alert-label-primary" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-primary"></i>
                          هشدار با آیکن برچسب - بررسی کنید!
                        </p>
                      <div>
                      <div class="alert alert-label alert-label-secondary" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-secondary"></i>
                          هشدار با آیکن برچسب - بررسی کنید!
                        </p>
                      <div>
                      <div class="alert alert-label alert-label-success" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-success"></i>
                          هشدار با آیکن برچسب - بررسی کنید!
                        </p>
                      <div>
هشدارهای سفارشی با قابلیت رد کردن
  
    
      <div class="alert alert-primary alert-dismissible" role="alert">
       <div class="d-flex align-items-sm-center">
         <img src="../assets/images/alert/cookie-.png" class="w-35 h-35 me-2" alt="image">
         <p class="mb-0">
           We have Cookies! We use it to ensure you get the best experience on our website and service
         </p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
       </div>

       <div class="alert alert-label alert-label-success justify-content-between" role="alert">
       <p class="mb-0">
         <i class="ti ti-garden-cart label-icon label-icon-success"></i>
         your order is delayed
       </p>
       <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="alert"> Accept</button>
       </div>

       <div class="alert alert-border-info" role="alert">
       <h6>
         <i class="ti ti-info-circle f-s-18 me-2 text-info"></i>
         New Version is now availble
       </h6>
       <p>
         With this new Version you have accesss to more customization features and file export options.
       </p>
       <div class="text-end">
         <a href="" class="link-primary text-d-underline" data-bs-dismiss="alert">Don't allow</a>
         <a href="" class="link-primary text-d-underline ms-2">Allow</a>
       </div>
       </div>

       <div class="alert custom-alert p-0" role="alert">
       <div class="alert-header">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
       <div class="alert-body">
       <h4 class="mb-0 text-center mb-3">
         <img src="../assets/images/alert/warning.png" class="w-40 h-40" alt="image">
         Under maintenance
       </h4>
       <p class="mb-3">
         Our team is currently checking some errors in this area.
         We dont't recommend changing any of your settings until the next update.
       </p>
       <div class="text-end">
         <button type="button" class="btn btn-warning">Get more info</button>
       </div>
       </div>
هشدار با محتوای اضافی
  
   
      <div class="alert alert-primary" role="alert">
      <h4 class="alert-heading">آفرین! <i class="ti ti-x float-end breadcrumb-start"
          data-bs-dismiss="alert"></i></h4>
      <p>Aww yeah, you successfully read this important alert message. This example text is going to run
        a bit longer so that you can see how spacing within an alert works with this kind of content.
      </p>
      <hr>
      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
        tidy.</p>
      </div>
      <div class="alert alert-secondary" role="alert">
       <h4 class="alert-heading">آفرین! <i class="ti ti-x float-end breadcrumb-start"
           data-bs-dismiss="alert"></i></h4>
       <p>Aww yeah, you successfully read this important alert message. This example text is going to run
         a bit longer so that you can see how spacing within an alert works with this kind of content.
       </p>
       <hr>
       <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
         tidy.</p>
      </div>
      <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">آفرین! <i class="ti ti-x float-end breadcrumb-start"
          data-bs-dismiss="alert"></i></h4>
      <p>Aww yeah, you successfully read this important alert message. This example text is going to run
        a bit longer so that you can see how spacing within an alert works with this kind of content.
      </p>
      <hr>
      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
        tidy.</p>
      </div>
      </div>
Live Alert
                    
                 
                        <div id="liveAlert"></div>
                        <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>