<div class="bg-light p-3">
                                                            <div class="toast-container">
                                                              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                                <div class="toast-header">
                                                                  <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                  <strong class="me-auto">Bootstrap</strong>
                                                                  <small class="text-muted">just now</small>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                                </div>
                                                                <div class="toast-body">
                                                                  See? Just like this.
                                                                </div>
                                                              </div>

                                                              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                                <div class="toast-header">
                                                                  <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                  <strong class="me-auto">Bootstrap</strong>
                                                                  <small class="text-muted">2 seconds ago</small>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                                </div>
                                                                <div class="toast-body">
                                                                  Heads up, toasts will stack automatically
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>            
                                                        
                                                    

                                                        
                                                         <div class="bg-light p-3">
                                                            <div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <!-- 2 -->
                                                            <div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                                <div class="mt-2 pt-2 border-top">
                                                                  <button type="button" class="btn btn-light-info text-info font-medium btn-sm">Take action</button>
                                                                  <button type="button" class="btn btn-light-danger text-danger font-medium btn-sm" data-bs-dismiss="toast">Close</button>
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>         
                                                        
                                                    

                                                        
                                                          <div class="bg-light p-3">
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                        </div>      
                                                        
                                                    

                                                        
                                                          <div class="bg-light p-3">
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-info font-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-primary font-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-danger font-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-warning font-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-success font-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                        </div>
                                                        
                                                    

                                                        
                                                         <div class="bg-light p-3">
                                                            <form>
                                                              <div class="form-group mb-3">
                                                                <label for="selectToastPlacement">Toast placement</label>
                                                                <select class="form-select mt-2" id="selectToastPlacement">
                                                                  <option value="" selected>Select a position...</option>
                                                                  <option value="top-0 start-0">Top left</option>
                                                                  <option value="top-0 start-50 translate-middle-x">Top center</option>
                                                                  <option value="top-0 end-0">Top right</option>
                                                                  <option value="top-50 start-0 translate-middle-y">Middle left</option>
                                                                  <option value="top-50 start-50 translate-middle">Middle center</option>
                                                                  <option value="top-50 end-0 translate-middle-y">Middle right</option>
                                                                  <option value="bottom-0 start-0">Bottom left</option>
                                                                  <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
                                                                  <option value="bottom-0 end-0">Bottom right</option>
                                                                </select>
                                                              </div>
                                                            </form>
                                                            <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts" style="height: 250px;">
                                                              <div class="toast-container position-absolute p-3" id="toastPlacement">
                                                                <div class="toast">
                                                                  <div class="toast-header">
                                                                    <i data-feather="bar-chart-2" class="fill-white text-info feather-sm me-2"></i>
                                                                    <strong class="me-auto">Bootstrap</strong>
                                                                    <small>11 mins ago</small>
                                                                  </div>
                                                                  <div class="toast-body">
                                                                    Hello, world! This is a toast message.
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>