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:
✅ Answered with Bootstrap 5 best practices.- 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.
Recommended Links: