<div class="mb-3">
            <button type="button" class="btn btn-success" id="showSuccessToast">Success Snackbar</button>
            <button type="button" class="btn btn-warning" id="showWarningToast">Warning Snackbar</button>
            <button type="button" class="btn btn-danger" id="showDangerToast">Danger Snackbar</button>
            <button type="button" class="btn btn-info" id="showInfoToast">Info Snackbar</button>
          </div>

          <div class="toast-container">
            <!-- Success Snackbar -->
            <div class="toast success snackbar" role="alert" aria-live="assertive" aria-atomic="true" id="successToast" data-bs-delay="5000" data-bs-autohide="true">
              <div class="d-flex">
                <span class="icon material-icons align-self-start">check_circle</span>
                <div class="toast-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nascetur adipiscing ultricies pulvinar nullam sodales. Massa.
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>

            <!-- Warning Snackbar -->
            <div class="toast warning snackbar" role="alert" aria-live="assertive" aria-atomic="true" id="warningToast" data-bs-delay="5000" data-bs-autohide="true">
              <div class="d-flex">
                <span class="icon material-icons">warning</span>
                <div class="toast-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nascetur adipiscing ultricies pulvinar nullam sodales. Massa.
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>

            <!-- Danger Snackbar -->
            <div class="toast danger snackbar" role="alert" aria-live="assertive" aria-atomic="true" id="dangerToast" data-bs-delay="5000" data-bs-autohide="true">
              <div class="d-flex">
                <span class="icon material-icons">error</span>
                <div class="toast-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nascetur adipiscing ultricies pulvinar nullam sodales. Massa.
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>

            <!-- Info Snackbar -->
            <div class="toast info snackbar" role="alert" aria-live="assertive" aria-atomic="true" id="infoToast" data-bs-delay="5000" data-bs-autohide="true">
              <div class="d-flex">
                <span class="icon material-icons">info</span>
                <div class="toast-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nascetur adipiscing ultricies pulvinar nullam sodales. Massa.
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>
          </div>
        
      

Você pode usar os seguintes valores para posicionar os snackbar:

• Top left: top-0 start-0
• Top center: top-0 start-50 translate-middle-x
• Top right: top-0 end-0
• Middle left: top-50 start-0 translate-middle-y
• Middle center: top-50 start-50 translate-middle
• Middle right: top-50 end-0 translate-middle-y
• Bottom left: bottom-0 start-0
• Bottom center: bottom-0 start-50 translate-middle-x
• Bottom right: bottom-0 end-0