Toasts

        
          <!-- Toast -->
          <div class="toast toast-show fade show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <div class="d-flex align-items-center flex-grow-1">
                <div class="flex-shrink-0">
                  <img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img4.jpg" alt="">
                </div>
                <div class="flex-grow-1 ms-3">
                  <h5 class="mb-0">Bob Dean</h5>
                  <small class="ms-auto">11 mins ago</small>
                </div>
                <div class="text-end">
                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
              </div>
            </div>
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
          </div>
          <!-- End Toast -->
        
      

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

          <!-- Toast -->
          <div id="liveToast" class="position-fixed toast hide" role="alert" aria-live="assertive" aria-atomic="true" style="top: 20px; right: 20px; z-index: 1000;">
            <div class="toast-header">
              <div class="d-flex align-items-center flex-grow-1">
                <div class="flex-shrink-0">
                  <img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img4.jpg" alt="">
                </div>
                <div class="flex-grow-1 ms-3">
                  <h5 class="mb-0">Bob Dean</h5>
                  <small class="ms-auto">11 mins ago</small>
                </div>
                <div class="text-end">
                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
              </div>
            </div>
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
          </div>
          <!-- End Toast -->
        
      

        
          <script>
              // INITIALIZATION OF LIVE TOAST
              // =======================================================
              const liveToast = new bootstrap.Toast(document.querySelector('#liveToast'))
              document.querySelector('#liveToastBtn').addEventListener('click', () => liveToast.show())
          </script>
        
      

        
          <div class="toast-container">
            <!-- Toast -->
            <div class="toast toast-show fade show" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <div class="d-flex align-items-center flex-grow-1">
                  <div class="flex-shrink-0">
                    <img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img4.jpg" alt="">
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h5 class="mb-0">Bob Dean</h5>
                    <small class="ms-auto">11 mins ago</small>
                  </div>
                  <div class="text-end">
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                </div>
              </div>
              <div class="toast-body">
                See? Just like this.
              </div>
            </div>
            <!-- End Toast -->

            <!-- Toast -->
            <div class="toast toast-show fade show" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <div class="d-flex align-items-center flex-grow-1">
                  <div class="flex-shrink-0">
                    <img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h5 class="mb-0">Ella Lauda</h5>
                    <small class="ms-auto">20 mins ago</small>
                  </div>
                  <div class="text-end">
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                </div>
              </div>
              <div class="toast-body">
                Heads up, toasts will stack automatically
              </div>
            </div>
            <!-- End Toast -->
          </div>
        
      

        
          <!-- Toast -->
          <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
            <div class="toast toast-show fade show" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
              <div class="toast-header">
                <div class="d-flex align-items-center flex-grow-1">
                  <div class="flex-shrink-0">
                    <img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img4.jpg" alt="">
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h5 class="mb-0">Bob Dean</h5>
                    <small class="ms-auto">11 mins ago</small>
                  </div>
                  <div class="text-end">
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                </div>
              </div>
              <div class="toast-body">
                Hello, world! This is a toast message.
              </div>
            </div>
          </div>
          <!-- End Toast -->