#### Notification

##### Bootstrap Toasts

###### Default Toast

ki-admin
Hello, world! This is a toast message.

###### Custom Content Toast

Hello, world! This is a toast message.

###### Color Schemes Toast

Hello, world! This is a toast message.
Hello, world! This is a toast message.

                                <div class="card">
                             <div class="card-header">
                              <h5>Bootstrap Toasts</h5>
                             </div>
                             <div class="card-body">
                              <div class="row">
                               <div class="col-md-4">
                                <h6 class="mb-3">Default Toast</h6>
                                <div class="toast d-block border-primary border-opacity-25 bg-light-primary" role="alert"
                                 aria-live="assertive" aria-atomic="true">
                                 <div class="toast-header border-primary border-opacity-25 bg-light-primary">
                                  <img src="../assets/images/logo/03.png"
                                   class="rounded me-2 h-30 w-30 b-r-4 " alt="">
                                  <strong class="me-auto">ki-admin</strong>
                                  <small>11 mins ago</small>
                                  <div class="bg-primary pt-1 ms-2 b-r-8">
                                   <button type="button" class="btn-close m-0 p-2 pt-0 mb-1" data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                                  </div>
                                 </div>
                                 <div class="toast-body border-primary border-opacity-25">
                                  Hello, world! This is a toast message.
                                 </div>
                                </div>
                               </div>

                               <div class="col-md-4">
                                <h6 class="mb-3">Custom Content Toast</h6>
                                <div class="toast d-block" role="alert" aria-live="assertive" aria-atomic="true">
                                 <div class="toast-body">
                                  Hello, world! This is a toast message.
                                  <div class="mt-2 pt-2 border-top">
                                   <button type="button" class="btn btn-primary ">Take action</button>
                                   <button type="button" class="btn btn-secondary " data-bs-dismiss="toast">Close</button>
                                  </div>
                                 </div>
                                </div>
                               </div>

                               <div class="col-md-4">
                                <h6 class="mb-3">Color Schemes Toast</h6>
                                <div class="toast d-block align-items-center bg-primary border-0 mb-3" role="alert"
                                 aria-live="assertive" aria-atomic="true">
                                 <div class="d-flex">
                                  <div class="toast-body">
                                   Hello, world! This is a toast message.
                                  </div>
                                  <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                   aria-label="Close"></button>
                                 </div>
                                </div>
                                <div class="toast d-block align-items-center bg-secondary border-0" role="alert"
                                 aria-live="assertive" aria-atomic="true">
                                 <div class="d-flex">
                                  <div class="toast-body">
                                   Hello, world! This is a toast message.
                                  </div>
                                  <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                   aria-label="Close"></button>
                                 </div>
                                </div>
                               </div>
                              </div>
                             </div>
                                    </div>

##### Placement Toasts

Toast Header

Some text inside the toast body

                             <div class="card">
                                <div class="card-header">
                                 <h5>Placement Toasts</h5>
                                </div>
                                <div class="card-body">
                                 <button type="button" class="btn btn-light-primary" id="toastbtn">Show Toast</button>
                                 <div class="toast toastbtn mt-3 bg-light-primary border-primary border-opacity-25 b-r-4">
                                  <div class="toast-header bg-light-primary border-primary border-opacity-25">
                              <strong class="me-auto">Toast Header</strong>
                              <div class="bg-primary d-flex-center b-r-8">
                               <button type="button" class="btn-close m-0 p-2" data-bs-dismiss="toast"></button>
                              </div>
                                  </div>
                                  <div class="toast-body">
                              <p>Some text inside the toast body</p>
                                  </div>
                                 </div>
                                </div>

                               </div>

##### Position Notification

It is Very Easy to Customize, and it uses in website application.

                             <div class="card">
                               <div class="card-header">
                                <h5>Position Notification
                                </h5>
                                <p>It is Very Easy to Customize and it uses in website application.</p>
                               </div>
                               <div class="card-body">
                                <div class="app-toast-button d-flex flex-wrap gap-2">
                                 <button class="btn btn-light-primary toast_top" id="new-toast">Top</button>
                                 <button class="btn btn-light-secondary toast_center" id="center-toast">Center</button>
                                 <button class="btn btn-light-success toast_left" id="left-toast">Left</button>
                                 <button class="btn btn-light-info" id="right-toast">Right</button>
                                 <button class="btn btn-light-warning" id="bottom-toast">Bottom</button>
                                </div>
                               </div>
                                </div>

##### Color Notification

It is Very Easy to Customize, and it uses in website application.

This is a Primary toast message.
This is a Secondary toast message.
This is a success toast message.
This is a Danger toast message.
This is a Warning toast message.
This is an Info toast message.
This is a Light toast message.
This is a Dark toast message.

                             <div class="card">
                             <div class="card-header">
                              <h5>Position Notification
                              </h5>
                              <p>It is Very Easy to Customize and it uses in website application.</p>
                             </div>
                             <div class="card-body">
                              <div class="app-toast-button">
                              <div class="d-flex gap-2 flex-wrap">
                               <button id="app-toast-primary" class="btn btn-light-primary toast-primary"
                               onclick="handleToast(this)">Primary</button>
                              <button id="app-toast-secondary" class="btn btn-light-secondary toast-secondary"
                               onclick="handleToast(this)">Secondary</button>
                              <button id="app-toast-success" class="btn btn-light-success toast-success"
                               onclick="handleToast(this)">Success</button>
                              <button id="app-toast-danger" class="btn btn-light-danger toast-danger"
                               onclick="handleToast(this)">Danger</button>
                              <button id="app-toast-warning" class="btn btn-light-warning toast-warning"
                               onclick="handleToast(this)">Warning</button>
                              <button id="app-toast-info" class="btn btn-light-info toast-info"
                               onclick="handleToast(this)">Info</button>
                              <button id="app-toast-light" class="btn btn-light-light toast-light"
                               onclick="handleToast(this)">Light</button>
                              <button id="app-toast-dark" class="btn btn-light-dark toast-dark"
                               onclick="handleToast(this)">Dark</button>
                              </div>

                              <div class="app-color-toast app-toast-primary d-none">
                               <div class="toast-item">
                                <div class="toast-title text-primary">
                                <i class="ti ti-download f-s-22"></i> This is a Primary toast message.
                                </div>
                                <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-primary"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-secondary d-none">
                               <div class="toast-item">
                               <div class="toast-icon text-secondary"></div>
                               <div class="toast-title text-secondary">
                                <i class="ti ti-butterfly f-s-22"></i>This is a Secondary toast message.
                               </div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-secondary"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-success d-none">
                               <div class="toast-item">
                               <div class="toast-icon text-success"></div>
                               <div class="toast-title text-success">
                                <i class="ti ti-award f-s-22"></i> This is a success toast message.
                               </div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-success"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-danger d-none">
                               <div class="toast-item">
                               <div class="toast-title text-danger">
                                <i class="ti ti-power f-s-22"></i> This is a Danger toast message.
                               </div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-danger"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-warning d-none">
                               <div class="toast-item">
                               <div class="toast-title text-warning">
                                <i class="ti ti-alert-triangle f-s-22"></i> This is a Warning toast message.
                               </div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-warning"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-info d-none">
                               <div class="toast-item">
                               <div class="toast-title text-info">
                                <i class="ti ti-inbox f-s-22"></i> This is a Info toast message.</div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-info"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-light d-none">
                               <div class="toast-item">
                               <div class="toast-title text-dark"> <i class="ti ti-download f-s-22"></i> This is a Light toast message.</div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-dark"></i></div>
                              </div>
                              <div class="app-color-toast app-toast-dark d-none">
                               <div class="toast-item">
                               <div class="toast-title text-dark">
                                <i class="ti ti-world-download f-s-22"></i> This is a Dark toast message.
                               </div>
                               <div class="toast-line"></div>
                               </div>
                               <div class="toast-close"><i class="fa fa-close text-dark"></i></div>
                              </div>
                              </div>
                             </div>

                                </div>