---
title: React Bootstrap Toast Component
name: Toast with Bootstrap Styling
description: Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.
route: /components/toast/
bootstrap_component: true
---

## 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.

<ExampleSnippet className="theme-bootstrap" component="ToastExample" componentName="React Bootstrap Toast" />
<ExampleSnippet className="theme-bootstrap" component="ToastLiveExample" componentName="React Bootstrap Toast" />

### Translucent background

Toasts have a slightly translucent background by default, giving a modern Bootstrap feel.

<ExampleSnippet className="theme-bootstrap bg-dark" component="ToastTranslucentExample" componentName="React Bootstrap Toast" />

### Stacked toasts

Wrap multiple toasts in a container to stack them vertically with spacing.

<ExampleSnippet className="theme-bootstrap" component="ToastStackingExample" componentName="React Bootstrap Toast" />

### Custom content

You can customize toasts by omitting headers, replacing close buttons, or applying utility classes and icons.

<ExampleSnippet className="theme-bootstrap" component="ToastCustomContentExample" componentName="React Bootstrap Toast" />
<ExampleSnippet className="theme-bootstrap" component="ToastCustomContent2Example" componentName="React Bootstrap Toast" />

### Color schemes

Use CoreUI’s utility classes and props like `color`, `text-white`, and `border-0` to create Bootstrap-styled toast variants.

<ExampleSnippet className="theme-bootstrap" component="ToastColorSchemesExample" componentName="React Bootstrap Toast" />

## 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.

- [&lt;CToast /&gt;](../api/#ctoast)
- [&lt;CToastHeader /&gt;](../api/#ctoastheader)
- [&lt;CToastBody /&gt;](../api/#ctoastbody)
- [&lt;CToastClose /&gt;](../api/#ctoastclose)
- [&lt;CToaster /&gt;](../api/#ctoaster)
