Toast

Toast is a small message that shows up in a box at the bottom of the screen and disappears on its own after few seconds. It is a simple feedback about an operation in which current activity remains visible and interactive.

Toast example

To use toast add class toast in parent div element, check the example code below for better understanding.

<div class="toast d-flex btn btn-success">
    <p>Success text</p>  
    <i class="fa-solid fa-xmark"></i>
</div>
<div class="toast d-flex btn btn-danger">
    <p>Error text</p>
    <i class="fa-solid fa-xmark"></i>
</div>
<div class="toast d-flex btn btn-info">
    <p>Info text</p>
    <i class="fa-solid fa-xmark"></i>
</div>
<div class="toast d-flex btn btn-warning">
    <p>Warning text</p>
    <i class="fa-solid fa-xmark"></i>
</div>