React Bootstrap — Toasts

Image for post
Image for post
Photo by Yukiko Kanada on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add toasts with React Bootstrap.


Toasts are popup notifications that are displayed to show users some information.

We can add it with the Toast component.

For instance, we can write:

We have the Toast component that has various components.

Toast.Header has the header.

It has an image inside.

Toast.Body has the toast body.

This will always show since we have no code to close the modal.


We can make a toast dismissible by setting the show state to control when it shows.

The onClose prop lets us run code to dismiss the toast.

For example, we can write:

to let us close the toast with the close button on the top right.

We can disable animation with the animation prop set to false .

For example, we can write:

Then we disable the animation when we open and close the toast.


When we have multiple toasts, then they’re stacked on top of each other.

For instance, we can write:

to show 2 toasts one on top of each other.


We can add the delay prop to hide the toast after a given number of milliseconds.

We’ve to add this with the autohide property to make it hide automatically.

For instance, we can write:

We have the delay prop to 3000 to close the toast after 3 seconds.

autohide lets us auto-hide the toast after the time is up.

Also, we’ve to add the close and onClose props to control the opening and closing of the toast.


We can add a toast easily with the Toast component.

It can contain any styles and we can change the placement.

Also, it can be auto-closed.

Written by

Web developer. Subscribe to my email list now at Email me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store