Live example 
<button type="button" class="btn btn-primary btn-wave" id="liveToastBtn">Show live
    toast</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header text-default">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">
            <strong class="me-auto">SciFi</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>
Basic example 
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-default">
        <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">

        <strong class="me-auto">SciFi</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"
            aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
Stacking 
<div class="toast-container position-static">
    <div class="toast fade show" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header text-default">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">

            <strong class="me-auto">SciFi</strong>
            <small class="text-muted">just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            See? Just like this.
        </div>
    </div>
    <div class="toast fade show" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header text-default">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">

            <strong class="me-auto">SciFi</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>
</div>
Color schemes 
<div class="toast align-items-center colorscemes-toast text-bg-primary border-0 fade show mb-4"
    role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Primary toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast align-items-center colorscemes-toast text-bg-secondary border-0 fade show mb-4"
    role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Secondary toast.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast align-items-center colorscemes-toast text-bg-success border-0 fade show mb-4"
    role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Success toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast align-items-center colorscemes-toast text-bg-info border-0 fade show"
    role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the info toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
Translucent 
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-default">
        <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">

        <strong class="me-auto">SciFi</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"
            aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
Custom content
Alternatively, you can also add additional controls and components to toasts. 
<div class="toast align-items-center fade show mb-3" role="alert"
    aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
            aria-label="Close">
        </button>
    </div>
</div>
<div>
    <span class="my-4 text-muted">
        Alternatively, you can also add additional controls and components to
        toasts.
    </span>
</div>
<div class="toast fade show mt-2" role="alert" aria-live="assertive"
    aria-atomic="true">
    <div class="toast-body">
        Hello, world! This is a toast message.
        <div class="mt-2 pt-2 border-top">
            <button type="button" class="btn btn-primary btn-sm btn-wave">Take
                action</button>
            <button type="button" class="btn btn-secondary btn-sm btn-wave"
                data-bs-dismiss="toast">Close</button>
        </div>
    </div>
</div>
Color Variants Live 
<div class="btn-list">
    <button type="button" class="btn btn-primary-light me-2 btn-wave" id="primaryToastBtn">Primary</button>
    <button type="button" class="btn btn-secondary-light me-2 btn-wave" id="secondaryToastBtn">secondary</button>
    <button type="button" class="btn btn-warning-light me-2 btn-wave" id="warningToastBtn">warning</button>
    <button type="button" class="btn btn-info-light me-2 btn-wave" id="infoToastBtn">info</button>
    <button type="button" class="btn btn-success-light me-2 btn-wave" id="successToastBtn">success</button>
    <button type="button" class="btn btn-danger-light me-2 btn-wave" id="dangerToastBtn">danger</button>
</div>
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="primaryToast" class="toast colored-toast bg-primary-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="secondaryToast" class="toast colored-toast bg-secondary-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-secondary">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="warningToast" class="toast colored-toast bg-warning-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-warning">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="infoToast" class="toast colored-toast bg-info-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-info">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="successToast" class="toast colored-toast bg-success-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-success">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="dangerToast" class="toast colored-toast bg-danger-transparent" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-danger">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
Solid Background Toasts 
<div class="btn-list">
    <button type="button" class="btn btn-primary me-2 btn-wave" id="solidprimaryToastBtn">Primary</button>
    <button type="button" class="btn btn-secondary me-2 btn-wave" id="solidsecondaryToastBtn">secondary</button>
    <button type="button" class="btn btn-warning me-2 btn-wave" id="solidwarningToastBtn">warning</button>
    <button type="button" class="btn btn-info me-2 btn-wave" id="solidinfoToastBtn">info</button>
    <button type="button" class="btn btn-success me-2 btn-wave" id="solidsuccessToastBtn">success</button>
    <button type="button" class="btn btn-danger me-2 btn-wave" id="soliddangerToastBtn">danger</button>
</div>
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="solid-primaryToast" class="toast colored-toast bg-primary text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="solid-secondaryToast" class="toast colored-toast bg-secondary text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-secondary text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="solid-warningToast" class="toast colored-toast bg-warning text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-warning text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="solid-infoToast" class="toast colored-toast bg-info text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-info text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="solid-successToast" class="toast colored-toast bg-success text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-success text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
    <div id="solid-dangerToast" class="toast colored-toast bg-danger text-fixed-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-danger text-fixed-white">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-dark.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
Toast Placements 
<div class="btn-list">
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="topleftToastBtn">Top Left</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="topcenterToastBtn">Top Center</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="toprightToastBtn">Top Right</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="middleleftToastBtn">Middle Left</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="middlecenterToastBtn">Middle Center</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="middlerightToastBtn">Middle Right</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="bottomleftToastBtn">Bottom Left</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="bottomcenterToastBtn">Bottom Center</button>
    <button type="button" class="btn btn-outline-primary me-2 btn-wave" id="bottomrightToastBtn">Bottom Right</button>
</div>
<div class="toast-container position-fixed top-0 start-0 p-3">
    <div id="topleft-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
    <div id="topcenter-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="topright-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed top-50 start-0 translate-middle-y p-3">
    <div id="middleleft-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed top-50 start-50 translate-middle">
    <div id="middlecenter-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed top-50 end-0 translate-middle-y p-3">
    <div id="middleright-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
    <div id="bottomleft-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
    <div id="bottomcenter-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="bottomright-Toast" class="toast colored-toast bg-primary-transparent text-primary" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-primary text-fixed-black">
            <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/toggle-logo-white.png" alt="...">
            <strong class="me-auto">SciFi</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Your,toast message here.
        </div>
    </div>
</div>
Aligning Toast Using Flexbox 
<div class="bd-example bg-light bd-example-toasts d-flex p-0">
    <div aria-live="polite" aria-atomic="true"
        class="d-flex justify-content-center align-items-center w-100">
        <div class="toast fade show shadow-lg" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-header text-default">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/scifi/build/assets/images/brand-logos/favicon.ico" alt="...">
                <strong class="me-auto">SciFi</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
</div>