Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

On this page

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

They're built with flexbox, so they're easy to align and position.

Overview

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.

Toasts are as flexible as you need and have very little required markup.

At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.

tip

Previously, our scripts dynamically added the hide attribute to completely hide a toast (with display:none, rather than just with opacity:0). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.

vue
<template>
  <Toast show>
    <ToastHeader>
      <b-img
        src="https://dummyimage.com/20x20/007aff/007aff"
        rounded
        margin="e-2"
        alt="Card image cap"
      />
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <CloseButton dismiss="toast" />
    </ToastHeader>
    <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
</template>

Live example

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

vue
<template>
  <b-button
    button="primary"
    toggle="toast"
    target="#liveToast"
  >
    Show live toast
  </b-button>

  <div
    class="position-fixed bottom-0 end-0 p-3"
    style="z-index: 11"
  >
    <Toast id="liveToast">
      <ToastHeader>
        <b-img
          src="https://dummyimage.com/20x20/007aff/007aff"
          rounded
          margin="e-2"
          alt="Card image cap"
        />
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <CloseButton dismiss="toast" />
      </ToastHeader>
      <ToastBody>Hello, world! This is a toast message.</ToastBody>
    </Toast>
  </div>
</template>

Translucent

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

vue
<template>
  <Toast show>
    <ToastHeader>
      <b-img
        src="https://dummyimage.com/20x20/007aff/007aff"
        rounded
        margin="e-2"
        alt="Card image cap"
      />
      <strong class="me-auto">Bootstrap</strong>
      <small text-color="muted">11 mins ago</small>
      <CloseButton dismiss="toast" />
    </ToastHeader>
    <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
</template>

Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

vue
 Custom content 
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. 
Here we've created a simpler toast by removing the default ToastHeader component, adding a custom hide icon from Bootstrap Icons, and using some  flexbox utilities  to adjust the layout.
vue
<template>
  <Toast show>
    <b-div flex>
      <ToastBody>Hello, world! This is a toast message.</ToastBody>
      <CloseButton
        dismiss="toast"
        margin="e-2 auto"
      />
    </b-div>
  </Toast>
</template>

 Alternatively, you can also add additional controls and components to toasts. 
vue
<template>
  <Toast show>
    <ToastBody>
      Hello, world! This is a toast message.
      <b-div
        margin="t-2"
        padding="t-2"
        border="top"
      >
        <b-button
          button="primary"
          size="sm"
        >
          Take action
        </b-button>
        <b-button
          button="secondary"
          size="sm"
          dismiss="toast"
        >
          Close
        </b-button>
      </b-div>
    </ToastBody>
  </Toast>
</template>

 Color schemes 
Building on the above example, you can create different toast color schemes with our  color  and  background  utilities. 
Here we've added .bg-primary and text-color="white" attribute to the Toast component. 
For a crisp edge, we remove the default border with border="0" attribute.
vue
<template>
  <Toast
    show
    text-color="white"
    background-color="primary"
    border="0"
  >
    <b-div flex>
      <ToastBody>Hello, world! This is a toast message.</ToastBody>
      <CloseButton
        dismiss="toast"
        margin="e-2 auto"
      />
    </b-div>
  </Toast>
</template>

 Placement 
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.
If you're only ever going to show one toast at a time, put the positioning styles right on the Toast component.
vue
<template>
  <BForm>
    <b-div margin="b-3">
      <b-label for="selectToastPlacement">
        Toast placement
      </b-label>
      <BFormSelect id="selectToastPlacement">
        <b-option
          value
          selected
        >
          Select a position...
        </b-option>
        <b-option value="top-0 start-0">
          Top left
        </b-option>
        <b-option value="top-0 start-50 translate-middle-x">
          Top center
        </b-option>
        <b-option value="top-0 end-0">
          Top right
        </b-option>
        <b-option value="top-50 start-0 translate-middle-y">
          Middle left
        </b-option>
        <b-option value="top-50 start-50 translate-middle">
          Middle center
        </b-option>
        <b-option value="top-50 end-0 translate-middle-y">
          Middle right
        </b-option>
        <b-option value="bottom-0 start-0">
          Bottom left
        </b-option>
        <b-option value="bottom-0 start-50 translate-middle-x">
          Bottom center
        </b-option>
        <b-option value="bottom-0 end-0">
          Bottom right
        </b-option>
      </BFormSelect>
    </b-div>
  </BForm>
  <b-div
    aria-live="polite"
    aria-atomic="true"
    background-color="body-secondary"
    position="relative"
    class="bd-example-toasts"
  >
    <ToastContainer padding="3">
      <Toast show>
        <ToastHeader>
          <b-img
            src="https://source.unsplash.com/random/20x20"
            rounded="start"
            margin="e-2"
          />
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
        </ToastHeader>
        <ToastBody>Hello, world! This is a toast message.</ToastBody>
      </Toast>
    </ToastContainer>
  </b-div>
</template>

For systems that generate more notifications, consider using a wrapping element so they can easily stack.
vue
<template>
  <b-div
    aria-live="polite"
    aria-atomic="true"
    position="relative"
  >
    <ToastContainer
      padding="3"
      top="0"
      end="0"
    >
      <Toast show>
        <ToastHeader>
          <b-img
            src="https://source.unsplash.com/random/20x20"
            rounded="start"
            margin="e-2"
          />
          <strong class="me-auto">Bootstrap</strong>
          <small text-corlor="muted">just now</small>
        </ToastHeader>
        <ToastBody>See? Just like this.</ToastBody>
      </Toast>
      <Toast show>
        <ToastHeader>
          <b-img
            src="https://source.unsplash.com/random/20x20"
            rounded="start"
            margin="e-2"
          />
          <strong class="me-auto">Bootstrap</strong>
          <small text-corlor="muted">2 seconds ago</small>
        </ToastHeader>
        <ToastBody>Heads up, toasts will stack automatically</ToastBody>
      </Toast>
    </ToastContainer>
  </b-div>
</template>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
vue
<template>
  <b-div
    aria-live="polite"
    aria-atomic="true"
    flex
    justify-content="center"
    align-items="center"
    relative-width="100"
  >
    <Toast show>
      <ToastHeader>
        <b-img
          src="https://source.unsplash.com/random/20x20"
          rounded="start"
          margin="e-2"
        />
        <strong class="me-auto">Bootstrap</strong>
        <small text-corlor="muted">11 mins ago</small>
      </ToastHeader>
      <ToastBody>Hello, world! This is a toast message.</ToastBody>
    </Toast>
  </b-div>
</template>

vue
<template>
  <Toast
    show
    autohide="false"
  >
    <ToastHeader>
      <b-img
        src="https://source.unsplash.com/random/20x20"
        rounded="start"
        margin="e-2"
      />
      <strong class="me-auto">Bootstrap</strong>
      <small text-corlor="muted">11 mins ago</small>
      <CloseButton dismiss="toast" />
    </ToastHeader>
    <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
</template>

While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. 
Even if you give the toast a long  delay timeout , keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). 
If you absolutely must have further controls, we recommend using a toast with autohide: false.