<h1>Bootstrap 4 Toast Example</h1>
<button id="showToast" class="btn btn-primary btn-lg w-25 mx-auto">Show Toast</button>
<!-- from https://getbootstrap.com/docs/4.3/components/toasts/ -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000" style="position: absolute; top: 1rem; right: 1rem;">
  <div class="toast-header">

    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
 </div>
</div>
html, body {
  height:100%;
}
body {
  background:#e2e2e2;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
// A $( document ).ready() block.
$( document ).ready(function() {

  $( "#showToast" ).click(function() {
    $('.toast').toast('show');
  });
    
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js