# Toast

{% hint style="warning" %}
Macro requires license
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FzKPh0EYKCzQYIBp8jVbt%2Fbsv5-toast.png?alt=media&#x26;token=76bfcb82-d16e-4377-aa11-a87a93e07e69" alt=""><figcaption></figcaption></figure>

## Description

The “Toast” message is a small popup window for alert like messages. It was introduced in Bootstrap 5. You have several options to configure where it appears, for how long it appears and what color style it should have.

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap 5 Toast” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FriXQrQZa9zqJ2A5uvpXb%2Fbsv5-toast-dialog-768x478.png?alt=media&#x26;token=e573e891-3026-40fa-887a-a3464943895c" alt=""><figcaption></figcaption></figure>

### **Style**

Select one of the Bootstrap styles. Leave empty for default.

### **Icon Style**

A rounded square icon is in the top left of the header. Select one of the Bootstrap color styles for it here.

### **Title**

Enter the title of the Toast here.

### **Show Timestamp**

Select this option if you want to show a timestamp at the right side of the header. The timestamp shows when the toast message was loaded.

### **Position**

Here you can select, where on the page the toast shall pop up. You can select between:

* Top left
* Top center
* Top right
* Middle left
* Middle center
* Middle right
* Bottom left
* Bottom center
* Bottom right

### **Auto Close**

If you want the toast to automatically close, enter the amount of milliseconds here after which that shall happen. Enter 0 for no auto close. You can always close the toast by clicking the close button (x) in the upper right corner.