Snackbar exemplos




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