I'm trying to create a new toast via javascript using the bootstrap 5 toasts

so basically I searched everywhere and nothing showed up, I do not want to toggle or trigger an existing toast, all I want is to create one and show it

there are no javascript methods to create one, in bootstrap documentation, there is only create an Instance to initialize an existing one, is there a way? .2/ponents/toasts/

I appreciate all answers

I'm trying to create a new toast via javascript using the bootstrap 5 toasts

so basically I searched everywhere and nothing showed up, I do not want to toggle or trigger an existing toast, all I want is to create one and show it

there are no javascript methods to create one, in bootstrap documentation, there is only create an Instance to initialize an existing one, is there a way? https://getbootstrap./docs/5.2/ponents/toasts/

I appreciate all answers

• javascript
• jquery
• twitter-bootstrap
• toast

3 Answers 3

The easiest way to pletely create the toast with Javascript and not use an existing HTML element would be to use document.createElement() to create the HTML divs and then add the needed classes, as described here to it.

If you want to get the following:

<div class="toast show">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

You would do this:

const toastContainer = document.createElement('div');
toastContainer.classList.add('toast', 'show');

const toastHeader = document.createElement('div');
toastHeader.classList.add('toast-header');
toastHeader.innerText = 'Toast Header';

const toastBody = document.createElement('div');
toastBody.classList.add('toast-body');
toastBody.innerText = 'Some text inside the toast body';

toastContainer.appendChild(toastHeader);
toastContainer.appendChild(toastBody);

document.body.appendChild(toastContainer);

Here I added the created divs to the body, but of course they can also be added to other divs.

I needed a function that creates a toast with content and depending on the severity/type a different color and delay.

Wanted to share my solution in case someone needs something similar like this.

First I have a function that creates the toast element:

The element should appear on the bottom left of the page. It is also possible to stack multiple toasts over each other, therefore we need a wrapping element that wraps them correctly

function createToastElement(type, content) {
    let toastContainer = document.createElement('div');
    toastContainer.classList.add('toast-container');

    let toast = document.createElement('div');
    toast.classList.add('toast');

    let toastBody = document.createElement('div');
    toastBody.classList.add('toast-body', type);
    toastBody.innerText = content;

    toast.appendChild(toastBody);
    toastContainer.appendChild(toast);

    if ($('.wrapping-element').length <= 0) {
        let wrappingElement = document.createElement('div');
        wrappingElement.classList.add('wrapping-element');
        wrappingElement.appendChild(toastContainer);
        document.body.appendChild(wrappingElement);
    }
    else {
        $('.wrapping-element').append(toastContainer);
    }
}

The function that initializes the toast

Depending on the type the toast should be visible for more or less amounts of seconds. After the toast is hidden it gets removed from the dom

function toast(type, content) {
    createToastElement(type, content);
    let toastElement = $('.toast');
    toastElement.toast({
        delay: type === 'danger' || type === 'warning' ? 20000 : 3000,
    });
    toastElement.toast('show');
    toastElement.on('hidden.bs.toast', function () {
        toastElement.remove();
    });
}

Styling

I have a scss with the following classes.

.wrapping-element {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.toast-container{
    margin: 15px;
}

.toast-body {
    min-width: 300px;
    color: white;
    background-color: black;

    &.success {
        background-color: green;
    }

    &.info {
        background-color: blue;
    }

    &.warning {
        background-color: yellow;
    }

    &.danger {
        background-color: red;
    }
}

Result

toast('danger', 'Bitte Zeitspanne auswählen');

i ended up doing this

const toastContainer =
`<div class="position-fixed top-0 end-0 p-3 z-index-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
        <strong class="me-auto">Toast Header</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
    Some text inside the toast body
    </div>
</div>
</div>`;
document.body.insertAdjacentHTML('afterbegin', toastContainer);
test = document.getElementById('toast');
const toast = bootstrap.Toast.getOrCreateInstance(test);
toast.show();

If anyone has a more efficient or effective method, feel free to share it.