How to show bootstrap 4.2 Toast on the upper right hand side?

Question

I am trying to utilize Bootstrap 4.2 Toast. I want the Toasts to show up on the upper right-hand side over the right sections of my site.

I tried the following markup as it shows in its boostrap example on the documentation, but I can't get it to show up.

<!-- Toasts -->
<div aria-live="polite" aria-atomic="true" style="position: relative;">

    <!-- Position it -->
    <div style="position: absolute; top: 3rem; right: 0;">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="mr-auto">Toast Title</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">
                Some Toast Body      
            </div>
       </div>

    </div>
</div>

Here is a fiddler with my complete markup, but can't seem to show up the toasts.

How can I show the toasts

Answer 1

This answer shows a Toast on the upper right. The original fiddle you created (before you edited the question) doesn't include Bootstrap JS.

From the Bootstrap docs...

"Toasts are opt-in for performance reasons, so you must initialize them yourself."

So you need to init them like...

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

Also, when you include a absolute position element inside a relative position element (like in your fiddle) the absolute element is relative to the parent and therefore below the other content on the page. Remove the relative parent to make the absolute Toast relative to the entire page.

Demo: https://codeply.com/go/AVBr2zUcue