RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/bootstrap/docs/components/toasts/ below:

Website Navigation

Components

Bootstrap Toasts - extended examples and tutorials

Bootstrap toasts are lightweight notifications that mimic the push notifications popularized by mobile and desktop operating systems. They utilize flexbox, making them simple to align and position.

Overview

Things to know when using the toast plugin:

Toasts are opt-in for performance reasons, so you must initialize them yourself.
Toasts will automatically hide if you do not specify autohide: false.

Examples Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Bootstrap toasts are as flexible as you need and require very little markup. At a minimum, you should have a single element containing your “toasted” content, and it’s strongly recommended to include a dismiss button.

Hello, world! This is a toast message.

<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">CoreUI for Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Previously, our scripts dynamically added the .hide class to fully hide a toast (using display:none instead of just opacity:0). This is no longer necessary. However, for backwards compatibility, our script will still toggle the class (even though there is no practical reason to do so) until the next major version.

Live example

Click the button below to display a toast (positioned with our utilities in the lower right corner) that is hidden by default.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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">CoreUI for Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

We use the following JavaScript to trigger our live toast demo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastCoreUI = coreui.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastCoreUI.show()
  })
}

Translucent

Toasts are slightly translucent to blend in with what’s below them.

Hello, world! This is a toast message.

<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">CoreUI for Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stacking

Wrap toasts in a toast container to stack them, which adds vertical spacing.

Heads up, toasts will stack automatically

<div class="toast-container position-static">
  <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">CoreUI for Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <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">CoreUI for Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Custom content

Customize your toasts by removing sub-components, adjusting them with utilities, or adding your own markup. In this example, we’ve made a simpler toast by removing the default .toast-header, incorporating a custom hide icon from CoreUI Icons, and using flexbox utilities to modify the layout.

Hello, world! This is a toast message.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-coreui-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternatively, you can also add additional controls and components to toasts.

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-coreui-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Color schemes

Building on the previous example, you can design various toast color schemes using our color and background utilities. In this case, we’ve added .text-bg-primary to the .toast and included .btn-close-white for the close button. To achieve a clean edge, we remove the default border with .border-0.

Building on the previous example, you can design various toast color schemes using our color and background utilities. We added .text-bg-primary to the .toast, and applied .btn-close-white to the close button. To achieve a clean edge, we remove the default border with .border-0.

Hello, world! This is a toast message.

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-coreui-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Placement

Place toasts with custom CSS where needed. The top right and top middle are common positions for notifications. If you’re only ever going to display one toast at a time, apply the positioning styles directly to the .toast.

Hello, world! This is a toast message.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative docs-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">

        <strong class="me-auto">CoreUI for Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

For systems that generate more notifications, consider using a wrapping element to allow them to stack easily.

Heads up, toasts will stack automatically

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <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">CoreUI for Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <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">CoreUI for Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Hello, world! This is a toast message.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <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">CoreUI for Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accessibility

Toasts are meant to be brief interruptions for your visitors or users. To assist those using screen readers and similar assistive technologies, you should wrap your toasts in an aria-live region. Changes to live regions, such as injecting or updating a toast component, are automatically announced by screen readers without moving the user’s focus or interrupting the user. Additionally, include aria-atomic="true" to ensure the entire toast is announced as a single, unfragmented unit, rather than just announcing what changed—this prevents issues if only part of the toast is updated or if the same toast appears again later. If the information is critical to the process, such as a list of form errors, use the alert component instead of a toast.

Note that the live region must exist in the markup before the toast is generated or updated. If you generate both dynamically and inject them simultaneously, assistive technologies generally will not announce them.

You should also adjust the role and aria-live level based on the content. For important messages like errors, use role="alert" aria-live="assertive"; otherwise, use role="status" aria-live="polite".

As the content changes, remember to update the delay timeout so users have enough time to read the toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-coreui-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

When using autohide: false, you need to add a close button to let users dismiss the toast.

Hello, world! This is a toast message.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-coreui-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">

    <strong class="me-auto">CoreUI for Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

While technically it’s possible to add focusable or actionable controls, such as additional buttons or links, to your toast, you should avoid doing this with autohiding toasts. Even if you set a long delay timeout, keyboard and assistive technology users might find it hard to reach the toast in time to act because toasts don’t receive focus when they appear. If you absolutely need to have additional controls, we recommend using a toast with autohide: false.

Usage

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Initialize toasts using JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new coreui.Toast(toastEl, option))

Triggers

Dismissal can be achieved with the data attribute on a button within the toast as demonstrated below:

<button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>

or on a button outside the toast using the data-coreui-target as demonstrated below:

<button type="button" class="btn-close" data-coreui-dismiss="toast" data-coreui-target="#my-toast" aria-label="Close"></button>

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-coreui-delay='{"show":50, "hide":250}'.

Name Type Default Description animation boolean true Adds a CSS fade transition to the toast autohide boolean true Hides the Bootstrap toast automatically delay number 5000 Sets delay before hiding the toast (ms) Methods Asynchronous methods and transitions

All our API methods are asynchronous and initiate a transition. They return to the caller as soon as the transition begins but before it concludes. Furthermore, a method call on a transitioning component will be ignored.

Refer to our JavaScript documentation for further details.

Method Description dispose Hides an element’s toast. Your Bootstrap toast will stay in the DOM but won’t be visible anymore. getInstance Static method that allows you to get the toast instance associated with a DOM element. For example: const myToastEl = document.getElementById('myToastEl') and const myToast = coreui.Toast.getInstance(myToastEl). Returns a Bootstrap toast instance. getOrCreateInstance Static method that gets the toast instance associated with a DOM element or creates a new one if it wasn’t initialized. For example: const myToastEl = document.getElementById('myToastEl') and const myToast = coreui.Toast.getOrCreateInstance(myToastEl). Returns a Bootstrap toast instance. hide Hides an element’s toast. Returns to the caller before the toast is actually hidden (i.e., before the hidden.coreui.toast event occurs). You need to manually call this method if you set autohide to false. isShown Returns a boolean indicating the toast’s visibility state. show Reveals an element’s toast. Returns to the caller before the toast is actually shown (i.e., before the shown.coreui.toast event occurs). You need to call this method manually; otherwise, your toast won’t appear. Events Event Description hide.coreui.toast This event is triggered immediately when the hide instance method is called. hidden.coreui.toast This event occurs when the toast has finished hiding from the user. show.coreui.toast This event triggers immediately when the show instance method is called. shown.coreui.toast This event occurs when the toast has become visible to the user.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.coreui.toast', () => {
  // do something...
})

Customizing CSS variables

Toasts use local CSS variables on .toast for improved real-time customization. Values for these CSS variables are set through Sass, so Sass customization remains supported as well.

--cui-toast-zindex: #{$zindex-toast};
--cui-toast-padding-x: #{$toast-padding-x};
--cui-toast-padding-y: #{$toast-padding-y};
--cui-toast-spacing: #{$toast-spacing};
--cui-toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --cui-toast-font-size);
--cui-toast-color: #{$toast-color};
--cui-toast-bg: #{$toast-background-color};
--cui-toast-border-width: #{$toast-border-width};
--cui-toast-border-color: #{$toast-border-color};
--cui-toast-border-radius: #{$toast-border-radius};
--cui-toast-box-shadow: #{$toast-box-shadow};
--cui-toast-header-color: #{$toast-header-color};
--cui-toast-header-bg: #{$toast-header-background-color};
--cui-toast-header-border-color: #{$toast-header-border-color};

SASS variables

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

CoreUI vs Bootstrap

While this Toast component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

✅ Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
🧠 Framework-native versions – CoreUI provides dedicated libraries for React.js, Vue.js, and Angular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
👨‍💻 Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
📦 More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
🛠️ Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
🌍 Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
🔒 LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4