bootstrap toast

<!-- Bootstrap 5 Toasts -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
      <img src="..." class="rounded me-2" alt="..." />
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button
         type="button"
         class="btn-close"
         data-bs-dismiss="toast"
         aria-label="Close"
      ></button>
   </div>
   <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

View another examples Add Own solution

4.5

Space_voyager 135 points

                                    &lt;!-- Flexbox container for aligning the toasts --&gt;
&lt;div aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot; class=&quot;d-flex justify-content-center align-items-center&quot; style=&quot;min-height: 200px;&quot;&gt;

  &lt;!-- Then put toasts within --&gt;
  &lt;div class=&quot;toast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
    &lt;div class=&quot;toast-header&quot;&gt;
      &lt;img src=&quot;...&quot; class=&quot;rounded mr-2&quot; alt=&quot;...&quot;&gt;
      &lt;strong class=&quot;mr-auto&quot;&gt;Bootstrap&lt;/strong&gt;
      &lt;small&gt;11 mins ago&lt;/small&gt;
      &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;toast-body&quot;&gt;
      Hello, world! This is a toast message.
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Thank you! 2

4.5 (2 Votes)

Ericuhe 100 points

                                    &lt;div class=&quot;container&quot;&gt;
  &lt;!-- Content here --&gt;
&lt;/div&gt;

Thank you! 4

4 (4 Votes)

IMath 90 points

                                    &lt;div class=&quot;toast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
  &lt;div class=&quot;toast-header&quot;&gt;
    &lt;img src=&quot;...&quot; class=&quot;rounded mr-2&quot; alt=&quot;...&quot;&gt;
    &lt;strong class=&quot;mr-auto&quot;&gt;Bootstrap&lt;/strong&gt;
    &lt;small&gt;11 mins ago&lt;/small&gt;
    &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;
      &lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;toast-body&quot;&gt;
    Hello, world! This is a toast message.
  &lt;/div&gt;
&lt;/div&gt;

Thank you! 5

4 (4 Votes)

4.13

Spencer Kenimer 80 points

                                    &lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;

  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css&quot;&gt;
  &lt;/head&gt;

  &lt;body&gt;

    &lt;div class=&quot;container mt-5&quot;&gt;

      &lt;!-- button to initialize toast --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;toastbtn&quot;&gt;Initialize toast&lt;/button&gt;

      &lt;!-- Toast --&gt;
      &lt;div class=&quot;toast&quot;&gt;
        &lt;div class=&quot;toast-header&quot;&gt;
          &lt;strong class=&quot;mr-auto&quot;&gt;Bootstrap&lt;/strong&gt;
          &lt;small&gt;11 mins ago&lt;/small&gt;
          &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot;&gt;
            &lt;span&gt;&times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;toast-body&quot;&gt;
          Hello, world! This is a toast message.
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;


    &lt;!-- Popper.js first, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      document.getElementById(&quot;toastbtn&quot;).onclick = function() {
        var toastElList = [].slice.call(document.querySelectorAll('.toast'))
        var toastList = toastElList.map(function(toastEl) {
        // Creates an array of toasts (it only initializes them)
          return new bootstrap.Toast(toastEl) // No need for options; use the default options
        });
       toastList.forEach(toast =&gt; toast.show()); // This show them
   
        console.log(toastList); // Testing to see if it works
      };

    &lt;/script&gt;
  &lt;/body&gt;

&lt;/html&gt;

Thank you! 8

4.13 (8 Votes)

GreenhouseVeg 115 points

                                    &lt;!-- Flexbox container for aligning the toasts --&gt;
&lt;div aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot; class=&quot;d-flex justify-content-center align-items-center&quot; style=&quot;min-height: 200px;&quot;&gt;

  &lt;!-- Then put toasts within --&gt;
  &lt;div class=&quot;toast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
    &lt;div class=&quot;toast-header&quot;&gt;
      &lt;img src=&quot;...&quot; class=&quot;rounded mr-2&quot; alt=&quot;...&quot;&gt;
      &lt;strong class=&quot;mr-auto&quot;&gt;Bootstrap&lt;/strong&gt;
      &lt;small&gt;11 mins ago&lt;/small&gt;
      &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;toast-body&quot;&gt;
      Hello, world! This is a toast messag e.
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Thank you! 1

5 (1 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Html

Html 2022-03-27 21:55:05 how to kill html
Html 2022-03-27 21:55:02 How to create web urls without extensions
Html 2022-03-27 21:45:11 space between 2 h tags without break
Html 2022-03-27 21:40:13 how to resize submit button in html
Html 2022-03-27 20:40:18 https://www.codegrepper.com
Html 2022-03-27 19:55:09 show image inside table with innerhtml
Html 2022-03-27 19:30:47 html email input
Html 2022-03-27 18:45:01 how to add favicon in html
Html 2022-03-27 18:15:21 picture html
Html 2022-03-27 18:15:11 ex: javaasdasdasdasd

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

bootstrap toast

Welcome Back!

Create a Free Account