Toast problem

[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">&times;</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.

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

[lcsqlpete]

The OS, browser, and Bootstrap versions are all in my original post.

To see a simple example of the problem, go to https://www.celticsociety.org/test/toast.html

This may not be a bug but a misunderstanding on my part.

[Johann-S]

Oh ok I understand your issue !

I think our docs isn't very clear about that's your job to position your toasts, it's explained here: https://getbootstrap.com/docs/4.2/components/toasts/#placement

Maybe we should highlight that 🤔

/CC @twbs/css-review @twbs/js-review

[XhmikosR]

Would mentioning it in Overview make it clearer?

[Johann-S]

Yep I think it would be clearer in the overview

[lcsqlpete]

Thanks, it's working now and yes I think it would be helpful to include something about positioning in the overview.

…

On Thu, Dec 27, 2018 at 4:24 AM Johann-S ***@***.***> wrote: Yep I think it would be clearer in the overview — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#27919 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIGhFONnwMjPfnfF0XBTea_qMqPxdyVxks5u9LwXgaJpZM4ZgoNo> .

[NourheneMbarek]

<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
button for close toast not work , anyone can help me