Toasts

Default Toast

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

<div id="toastExample" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <p class="circle p-5 me-2 mb-0 bg-success"></p>
        <strong class="me-auto">Success</strong>
        <small>Just Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div><!-- / toast-header -->
    <div class="toast-body">
        <p class="mb-0">Congrats. You successfully read this message on a toast.</p>
    </div><!-- / toast-body -->
</div><!-- / toast -->

Notification Toast

Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup.

Default Notification Toast
Dark Notification Toast
<!-- default notification toast -->
<div id="toastNotification" class="toast notification show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
        <ul class="list-unstyled list-media mb-0 notification-content">
            <li class="list-group-item bg-transparent p-0 mb-0 b-0">
                <div class="list-media-content list-media-success">
                    <i class="bi-cash fs-18"></i>
                </div><!-- / list-media-content -->
                <div class="info">
                    <span class="sub-title">Incoming Payment</span>
                    <span class="title text-success fs-18 fw-bold mb-0">$29.99</span>
                </div><!-- / info -->
            </li><!-- / list-group-item -->
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div><!-- / toast-body -->
</div><!-- / toast -->

<!-- dark notification toast -->
<div id="toastNotificationTwo" class="toast notification show bg-info dark" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
        <ul class="list-unstyled list-media mb-0 notification-content">
            <li class="list-group-item bg-transparent p-0 mb-0 b-0">
                <div class="list-media-content bg-white">
                    <i class="bi-info fs-24 text-info"></i>
                </div><!-- / list-media-content -->
                <div class="info">
                    <span class="d-block text-white mb-10 fw-bold">Important Information</span>
                    <span class="title text-light mb-0">This is a dark notification on a toast with .bg-info color</span>
                </div><!-- / info -->
            </li><!-- / list-group-item -->
        </ul>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div><!-- / toast-body -->
</div><!-- / toast -->

Toast Colors

You can use .bg-* classes to change the background-color of the toasts, also add .dark-mode if you also want the .btn-close and the content text to change to a light color.

Primary Toast
Success Toast
<!-- primary toast -->
<div id="toastPrimary" class="toast show bg-primary dark-mode" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <p class="circle p-5 me-2 mb-0 bg-warning"></p>
        <strong class="me-auto">Warning</strong>
        <small>1 minute ago</small>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div><!-- / toast-header -->
    <div class="toast-body">
        <p class="mb-0">Warning! Better check yourself.</p>
    </div><!-- / toast-body -->
</div><!-- / toast -->

<!-- success toast -->
<div id="toastPrimary" class="toast show bg-success dark-mode" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <p class="circle p-5 me-2 mb-0 bg-white"></p>
        <strong class="me-auto">Success</strong>
        <small>3 minutes ago</small>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div><!-- / toast-header -->
    <div class="toast-body">
        <p class="mb-0">Congrats! This is a success message.</p>
    </div><!-- / toast-body -->
</div><!-- / toast -->

Toast Positions

The toasts has to be initialized via JavaScript, you can find more info in Bootstrap vDocs - Documentation Template & UI Kit

<button type="button" class="btn btn-primary" id="toastbtn-br">Bottom Right</button>

<!-- init JS -->
<script>
  document.getElementById("toastbtn-br").onclick = function() {
    var myAlert =document.getElementById('toastOne');//select id of toast
      var bsAlert = new bootstrap.Toast(myAlert);//inizialize it
      bsAlert.show();//show it
  };
</script>

<!-- position bottom right -->
<div class="position-fixed bottom-15 right-15" style="z-index: 999999">
    <div id="toastOne" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <p class="circle p-5 me-2 mb-0 bg-primary"></p>
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div><!-- / toast-header -->
        <div class="toast-body">
            <p class="mb-0">Hello, world! This is a toast message.</p>
        </div><!-- / toast-body -->
    </div><!-- / toast -->
</div><!-- / position-fixed -->
<!-- / toastOne -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav