default.html

<div class="col-lg-12 control-section toast-default-section">
    <div class="e-sample-resize-container">
        <div id="toast_default">
        </div>
        <div class="col-lg-12 col-sm-12 col-md-12 center">
            <div id="toastBtnDefault" style="margin: auto;text-align: center">
                <button class="e-btn" id="toastBtnShow">Show Toasts</button>
                <button class="e-btn" id="toastBtnHide">Hide All</button>
            </div>
        </div>
    </div>
</div>

<div id="action-description">
    <p>
        This sample demonstrates the basic layout of a <code>Toast</code> to show simple notification and hide them.
    </p>
</div>
<div id="description">
    <p>
        The <code>Toast</code> is a notification pop-up used to display on the desired position with required message and header icons.
    </p>
    <p>The header text is set using <code>title</code> property.</p>
    <p>Information to be displayed is set using <code>content</code> property.</p>
    <p>More information about Toast can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/toast/es5-getting-started/">documentation</a> section.</p>
</div>

<style>
     #toast_default .e-meeting::before {
        content: "\e705";
        font-size: 17px;
    }
    .bootstrap4 #toast_default .e-meeting::before {
        content: "\e763";
        font-size: 20px;
    }
</style>