How do I customize the position of a Bootstrap toast to appear at the bottom-right of the page?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I customize the position of a Bootstrap toast to appear at the bottom-right of the page?

Asked on Nov 06, 2025

Answer

To customize the position of a Bootstrap toast to appear at the bottom-right of the page, you can use Bootstrap's utility classes to position the toast container. Here's a simple example to achieve this:

<!-- BEGIN COPY / PASTE -->
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <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>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `position-fixed` class to fix the toast's position relative to the viewport.
`bottom-0` and `end-0` classes position the toast at the bottom-right corner.
The `p-3` class adds padding around the toast container.
Ensure the `z-index` is set appropriately to display the toast above other elements.
Initialize the toast using JavaScript to make it functional.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I customize the position of a Bootstrap toast to appear at the bottom-right of the page?

Asked on Nov 06, 2025

Answer

The Q&A Network