Toast

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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">

            <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">

                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">

                <strong class="me-auto">synto</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>
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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">

            <strong class="me-auto">synto</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>
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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">
                <strong class="me-auto">synto</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>
Color schemes 
<div class="toast align-items-center 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 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 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 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>
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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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 text-fixed-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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-white">
                <img class="bd-placeholder-img rounded me-2" src="https://laravelui.spruko.com/synto/build/assets/img/brand-logos/toggle-white.png" alt="...">
                <strong class="me-auto">synto</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/synto/build/assets/img/brand-logos/favicon.ico" alt="...">
                    <strong class="me-auto">synto</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>