#### Alert

##### Basic Alert

Simple primary alert -check it out!
Simple secondary alert -check it out!
Simple success alert -check it out!
Simple danger alert -check it out!
Simple warning alert -check it out!
Simple info alert -check it out!
Simple light alert -check it out!
Simple dark alert -check it out!

    <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>

##### Outline Alert

Outline-alert primary -check it out!
Outline-alert secondary -check it out!
Outline-alert success -check it out!
Outline-alert danger -check it out!
Outline-alert warning -check it out!
Outline-alert info -check it out!
Outline-alert light -check it out!
Outline-alert dark -check it out!

    <div class="alert alert-outline-primary" role="alert">...</div>
    <div class="alert alert-outline-secondary" role="alert">...</div>
    <div class="alert alert-outline-success" role="alert">...</div>
    <div class="alert alert-outline-danger" role="alert">...</div>
    <div class="alert alert-outline-warning" role="alert">...</div>
    <div class="alert alert-outline-info" role="alert">...</div>
    <div class="alert alert-outline-light" role="alert">...</div>
    <div class="alert alert-outline-dark" role="alert">...</div>

##### Light Alert With Link color

Light primary color alert with an example link -Check it!
Light secondary color alert with an example link -Check it!
Light success color alert with an example link -Check it!
Light danger color alert with an example link -Check it!
Light warning color alert with an example link -Check it!
Light info color alert with an example link -Check it!
Light light color alert with an example link -Check it!
Light dark color alert with an example link -Check it!

         <div class="alert alert-light-primary" role="alert"> ...</div>
         <div class="alert alert-light-secondary " role="alert"> ...  </div>
         <div class="alert alert-light-success " role="alert">...</div>
         <div class="alert alert-light-danger " role="alert"> ... </div>
         <div class="alert alert-light-warning " role="alert"> ...   </div>
         <div class="alert alert-light-info " role="alert"> ... </div>
         <div class="alert alert-light-light " role="alert"> ...   </div>
         <div class="alert alert-light-dark " role="alert"> ...   </div>

##### Alert With Icons

Light-border-primary alert With icons -check it out!

Light-border-secondary alert With icons -check it out!

Light-border-success alert With icons -check it out!

Light-border-danger alert With icons -check it out!

Light-border-warning alert With icons -check it out!

Light-border-info alert With icons -check it out!

Light-border-light alert With icons -check it out!

Light-border-dark alert With icons -check it out!

    <div class="alert alert-light-border-primary" role="alert"> ...  </div>
    <div class="alert alert-light-border-secondary" role="alert"> ...  </div>
    <div class="alert alert-light-border-success" role="alert"> ...  </div>
    <div class="alert alert-light-border-danger" role="alert">  ...  </div>
    <div class="alert alert-light-border-warning " role="alert"> ...  </div>
    <div class="alert alert-light-border-info " role="alert"> ...  </div>
    <div class="alert alert-light-border-light" role="alert"> ...  </div>
    <div class="alert alert-light-border-dark" role="alert"> ...  </div>

##### Alert With Left Border

Alert with left slide border - check out!
Alert with left slide border - check out!
Alert with left slide border - check out!

    <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>

##### Alert With Label Icons

Alert with lable icons - check out!

Alert with lable icons - check out!

Alert with lable icons - check out!

    <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>

##### Custom Alerts With Dismissing

We have Cookies! We use it to ensure you get the best experience on our website and service

your order is delayed

###### New Version is now availble

With this new Version you have accesss to more customization features and file export options.

Don't allow Allow

#### Under maintenance

Our team is currently checking some errors in this area. We dont't recommend changing any of your settings until the next update.

    <div class="alert alert-primary alert-dismissible" role="alert">
        <div class="d-flex justify-content-between">
          <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>

##### Alert Additional content

#### Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

#### Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

#### Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    <div class="alert alert-primary" role="alert">
      <h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
        data-bs-dismiss="alert"></i></h4>
      <p>...</p>
      <hr>
      <p class="mb-0">...</p>
    </div&g

    <div class="alert alert-secondary" role="alert">
        <h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
          data-bs-dismiss="alert"></i></h4>
        <p>...</p>
        <hr>
        <p class="mb-0">...lt;/p>
    </div&g

    <div class="alert alert-success" role="alert">
        <h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
          data-bs-dismiss="alert"></i></h4>
        <p>...</p>
        <hr>
        <p class="mb-0">...</p>
        </div>
    </div>

##### Live Alert

    <div id="liveAlert"></div>
    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>