Loading
Basic Toast
See below toast preview
                                        
    <div id="toast-1" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1">
        <img src="..." class="rounded mr-2" alt="" style="width: 32px">
        <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">×</span>
        </button>
        <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>
                                        
                                    
Toast CTA
See below toast preview
                                        
    <div id="toast-1" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1">
        <img src="..." class="rounded mr-2" alt="" style="width: 32px">
        <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">×</span>
        </button>
        <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>
    <button type="button" class="btn btn-brand" onclick="$('#toast-2').toast('show')">Preview</button>
                                        
                                    
Toast Placement