<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                <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>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
        

<button type="button" class="btn btn-primary" id="toastTopRightBtn">Top right</button>
            <button type="button" class="btn btn-secondary" id="toastTopLeftBtn">Top Left</button>
            <button type="button" class="btn btn-warning" id="toastBottomRightBtn">Bottom Right</button>
            <button type="button" class="btn btn-danger" id="toastBottomLeftBtn">Bottom Left</button>

            <div class="toast-container position-fixed top-0 end-0 p-3">
                <div id="toastTopRight" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                        <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>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>
            </div>

            
            <div class="toast-container position-fixed top-0 start-0 p-3">
                <div id="toastTopLeft" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                        <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>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>
            </div>

            
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div id="toastBottomRight" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                        <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>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>
            </div>

            
            <div class="toast-container position-fixed bottom-0 start-0 p-3">
                <div id="toastBottomLeft" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                        <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>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>
            </div>
        

<form>
            <div class="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-body-secondary position-relative bd-example-toasts rounded-3" style="height: 200px;">
            <div class="toast-container p-3" id="toastPlacement">
                <div class="toast fade show">
                    <div class="toast-header">
                    <img src="assets/img/1.jpg" class="rounded me-2" alt="...">
                    <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>