Bootstrap 5 Tutorial

Bootstrap 5 Toast

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="327be98f-0da0-401f-b43f-c97db56ebe11" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Toast</h3>
<p>Toasts in Bootstrap 5 are lightweight notifications that appear at the bottom of the viewport, often used for displaying short messages, alerts, or status updates. Unlike modal dialogs, toasts are minimally intrusive, allowing users to continue interacting with the app while being informed of updates or actions.</p>
<hr />
<h3>Key Features of Bootstrap 5 Toasts</h3>
<ol>
<li><strong>Non-intrusive Notifications</strong>: Toasts don&rsquo;t obstruct the interface, making them ideal for background notifications.</li>
<li><strong>Customizable Appearance and Placement</strong>: Toasts can be positioned anywhere on the screen and styled using Bootstrap classes.</li>
<li><strong>Automatic and Manual Control</strong>: Toasts can auto-dismiss after a set time or be controlled manually for persistent notifications.</li>
<li><strong>JavaScript API</strong>: Offers methods for easy control of when to show and hide toasts.</li>
</ol>
<hr />
<h3>Example: Creating a Toast in Bootstrap 5</h3>
<p>Here&rsquo;s a basic example demonstrating how to implement a toast using Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Toast Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Toast container --&gt;
    &lt;div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"&gt;
        &lt;div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
            &lt;div class="toast-header"&gt;
                &lt;img src="..." class="rounded me-2" alt="..."&gt;
                &lt;strong class="me-auto"&gt;Bootstrap&lt;/strong&gt;
                &lt;small class="text-muted"&gt;Just now&lt;/small&gt;
                &lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="toast-body"&gt;
                Hello, this is a Bootstrap 5 toast notification!
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;button type="button" class="btn btn-primary" id="showToastBtn"&gt;Show Toast&lt;/button&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        // Show toast on button click
        document.getElementById('showToastBtn').addEventListener('click', function () {
            var toastEl = document.getElementById('liveToast');
            var toast = new bootstrap.Toast(toastEl);
            toast.show();
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Toast Container</strong>: The toast is placed inside a fixed-positioned container at the bottom-right corner of the viewport.</li>
<li><strong>Toast Structure</strong>: The toast includes a header with an optional image, title, and close button, along with a body for the main message.</li>
<li><strong>JavaScript Initialization</strong>: A button triggers the toast when clicked, using Bootstrap&rsquo;s JavaScript API to show the toast.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More