Toasts

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

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
  color="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="body-secondary">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
<template>
 <ToastContainer position="static">
  <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="body-secondary">just now</small>
    <CloseButton dismiss="toast" />
   </ToastHeader>
   <ToastBody>See? Just like this.</ToastBody>
  </Toast>
  <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="body-secondary">2 seconds ago</small>
    <CloseButton dismiss="toast" />
   </ToastHeader>
   <ToastBody>Heads up, toasts will stack automatically</ToastBody>
  </Toast>
 </ToastContainer>
</template>

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
     color="primary"
     size="sm"
    >
     Take action
    </b-button>
    <b-button
     color="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">
    <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>
   </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="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <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="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <strong class="me-auto">Bootstrap</strong>
     <small text-corlor="body-secondary">just now</small>
    </ToastHeader>
    <ToastBody>See? Just like this.</ToastBody>
   </Toast>
   <Toast show>
    <ToastHeader>
     <b-img
      src="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <strong class="me-auto">Bootstrap</strong>
     <small text-corlor="body-secondary">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="/img/logo/icon1.svg"
     rounded="start"
     margin="e-2"
     width="20"
    />
    <strong class="me-auto">Bootstrap</strong>
    <small text-corlor="body-secondary">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="/img/logo/icon1.svg"
    rounded="start"
    margin="e-2"
    width="20"
   />
   <strong class="me-auto">Bootstrap</strong>
   <small text-corlor="body-secondary">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.