Bootstrap - Toasts Part 4: Customizing Toast Appearance

Toast appearance can be customized using Bootstrap utility classes or custom CSS.

Examples and Explanation

Colored Backgrounds

<div class="toast bg-success text-white">

    <div class="toast-body">Success message.</div>

</div>

Explanation: Using utility classes like bg-success changes the background color of the toast.

Toast with Icons

<div class="toast">

    <div class="toast-header">

        <i class="bi bi-info-circle-fill text-primary me-2"></i>

        <strong class="me-auto">Info</strong>

        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>

    </div>

    <div class="toast-body">Toast with an icon.</div>

</div>

Explanation: Adding icons to the header makes the toast visually appealing.

Custom Animation

.toast {

    animation: slide-in 0.5s ease-in-out;

}

@keyframes slide-in {

    from {

        transform: translateX(100%);

    }

    to {

        transform: translateX(0);

    }

}

Explanation: Custom animations can enhance toast appearance and grab user attention.