bs5-toast

Bootstrap 5 toasts generator

Install bs5-toast with npm

npm install bs5-toast

Install from cdn

<script src="https://unpkg.com/bs5-toast/dist/bs5-toast.js"></script>

import bs5 from 'bs5-toast'

new bs5.Toast({
	body: 'Hello world',
}).show()

or use directly in script tag

<script src="https://unpkg.com/bs5-toast/dist/bs5-toast.js"></script>
<script>
	new bs5.Toast({
		body: 'Hello world',
	}).show()
</script>

Name	Type	Default	Description
`body`	string	‘’	Body content. Can also be filled with html tags. example: `Hello <b>World</b>`
`header`	string	‘’	Header content. Can also be filled with html tags. example: `<h6 class="mb-0">Success</h6>`
`animation`	boolean	`true`	Apply transition to the toast
`autohide`	boolean	`true`	Auto hide the toast
`btnClose`	boolean	`true`	Show close button
`btnCloseWhite`	boolean	`false`	Set close button as white variant
`className`	string	‘’	Class attribute to be added in class ‘.toast’
`delay`	number	5000	Delay hiding the toast (ms)
`gap`	number	16	Gap between toasts (px)
`margin`	string	`1rem`	Margin of corner. Can also be filled with a css variable. example: `var(--toast-margin)`
`placement`	string	`top-right`	Corner position of toast. Available values: `top-right, top-left, bottom-right, bottom-left`

Reveals an element’s toast.

const toast = new bs5.Toast({
	body: 'Hello world',
})
toast.show()

Hides an element’s toast.

toast.hide()

Get the toast element.

toast.element.addEventListener('shown.bs.toast', function () {
	console.log('toast shown!')
})
toast.show()

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

Place toasts as you need. The top right is often used for notifications.

Create different toast color schemes with Bootstrap color and background utilities.

Toasts are as flexible as you need. You can put any html tag in toast header or body.