Toasts

Use toasts to indicate messages

Default

The following example is the basic pagination style for Pixel:

<div class="col-12">
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header text-dark">
            <span class="fab fa-bootstrap"></span>
            <strong class="mr-auto ml-2">Neumorphism</strong>
            <small class="text-gray">11 mins ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>

Shadow inset Pro

You can also use the .shadow-inset modifier class to use the upgraded neumorphism shadow:

<div class="col-12">
    <div class="toast bg-primary shadow-inset text-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header text-dark">
            <span class="fab fa-bootstrap"></span>
            <strong class="mr-auto ml-2">Neumorphism</strong>
            <small>11 mins ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
        </div>
</div>