Toast problem
Created by: lcsqlpete
Using OSX 10.13.6, Chrome 71.0.3578.98 and Bootstrap 4.2.1.
Copied the code for showing a toast from the documentation along with a button to show it. I thought toasts normally displayed on top of other page elements but in my case, the toast displays below (further down the page than) the button
Here's the code.
<button type="button" class="btn" onClick="$('.toast').toast('show')">Show</button>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Toast heading</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-success">
<p>Toast body</p>
</div>
</div>
I'm bringing in Bootstrap with:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Thanks in advance for any guidance.