bs5-toast

Bootstrap 5 toasts generator

https://bs5-toast.vercel.app

Features

• Customizable content
• Smooth animation
• Typed safe

Installation

Install bs5-toast with npm

npm install bs5-toast

Install from cdn

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

Usage/Examples

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>

Options

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

Methods

show

Reveals an element’s toast.

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

hide

Hides an element’s toast.

toast.hide()

element

Get the toast element.

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