Notification

Bootstrap Toasts
Default Toast
Custom Content Toast
Color Schemes Toast
                    

                            <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">Ra-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 a 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>