Toast

This is a toast message.

<Code>

<!-- Button to open up toast -->
<button class="btn btn-indigo mb-2 mx-auto" id="show-toast">Show Toast</button>

<!-- Toast -->
<div class="toast mx-auto" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="10000">
    <div class="toast-header bg-dark">
        <img src="/assets/images/MSIconNewColorV2.svg" class="rounded mr-2" alt="Material Style Icon" width="20px">
        <strong class="mr-auto text-white">Material Style</strong>
        <small class="text-white">5 mins ago</small>
        <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body bg-dark text-white">
        This is a toast message.
    </div>
</div>

<script>
    $('#show-toast').on('click', function(){
        $('.toast').toast('show');
    });
</script>