Toasts - Documentation | Front - Admin & Dashboard Template

Basic example

Preview
HTML

Hello, world! This is a toast message.

                    
                      <!-- Toast -->
                      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                          <img src="../assets/img/160x160/img4.jpg" class="avatar avatar-sm avatar-circle mr-2" alt="Image description">
                          <h5 class="mb-0">Bob Dean</h5>
                          <small class="ml-auto">11 mins ago</small>
                          <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
                            <i class="tio-clear" aria-hidden="true"></i>
                          </button>
                        </div>
                        <div class="toast-body">
                          Hello, world! This is a toast message.
                        </div>
                      </div>
                      <!-- End Toast -->

Usage

Hello, world! This is a toast message.

                    
                      <!-- Toast Luncher -->
                      <button id="toast-invoker" class="btn btn-primary">Toast</button>

                      <!-- Toast -->
                      <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
                        <div class="toast-header">
                          <img src="../assets/img/160x160/img4.jpg" class="avatar avatar-sm avatar-circle mr-2" alt="Image description">
                          <h5 class="mb-0">Bob Dean</h5>
                          <small class="ml-auto">11 mins ago</small>
                          <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
                            <i class="tio-clear" aria-hidden="true"></i>
                          </button>
                        </div>
                        <div class="toast-body">
                          Hello, world! This is a toast message.
                        </div>
                      </div>
                      <!-- End Toast -->

                    
                      <script>
                        $(document).on('ready', function () {
                          // initialization of Toasts
                          $('.toast-show').toast({
                            autohide: false
                          });

                          $('.toast-show').toast('show');

                          $('#toast-invoker').click(function () {
                            $('#toast').toast({
                              delay: 1500
                            });

                            $('#toast').toast('show');
                          });
                        });
                      </script>

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

Preview
HTML

See? Just like this.

Heads up, toasts will stack automatically

                    
                      <!-- Toast -->
                      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                          <img src="../assets/img/160x160/img9.jpg" class="avatar avatar-sm avatar-circle mr-2" alt="Image description">
                          <h5 class="mb-0">Ella Lauda</h5>
                          <small class="ml-auto">just now</small>
                          <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
                            <i class="tio-clear" aria-hidden="true"></i>
                          </button>
                        </div>
                        <div class="toast-body">
                          See? Just like this.
                        </div>
                      </div>
                      <!-- End Toast -->

                      <!-- Toast -->
                      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                          <img src="../assets/img/160x160/img5.jpg" class="avatar avatar-sm avatar-circle mr-2" alt="Image description">
                          <h5 class="mb-0">Finch Hoot</h5>
                          <small class="ml-auto">5 minutes ago</small>
                          <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
                            <i class="tio-clear" aria-hidden="true"></i>
                          </button>
                        </div>
                        <div class="toast-body">
                          Heads up, toasts will stack automatically
                        </div>
                      </div>
                      <!-- End Toast -->

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

Preview
HTML

Hello, world! This is a toast message.

                    
                      <!-- Toast -->
                      <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
                        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
                          <div class="toast-header">
                            <img src="../assets/img/160x160/img4.jpg" class="avatar avatar-sm avatar-circle mr-2" alt="Image description">
                            <h5 class="mb-0">Bob Dean</h5>
                            <small class="ml-auto">11 mins ago</small>
                            <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
                              <i class="tio-clear" aria-hidden="true"></i>
                            </button>
                          </div>
                          <div class="toast-body">
                            Hello, world! This is a toast message.
                          </div>
                        </div>
                      </div>
                      <!-- End Toast -->