React Bootstrap Toast Component
Toast with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.
How to use React Bootstrap Toast component#
Use CoreUI's React toast notifications styled like Bootstrap to provide lightweight, dismissible alerts for your application. Toasts can include headers, body content, icons, or be customized entirely.
Basic usage#
Toasts support headers and body content. Use the autohide prop to configure automatic dismissal behavior.
Translucent background#
Toasts have a slightly translucent background by default, giving a modern Bootstrap feel.
Stacked toasts#
Wrap multiple toasts in a container to stack them vertically with spacing.
Custom content#
You can customize toasts by omitting headers, replacing close buttons, or applying utility classes and icons.
Color schemes#
Use CoreUI’s utility classes and props like color, text-white, and border-0 to create Bootstrap-styled toast variants.
API reference#
Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React.