Bootstrap - Toasts Part 2: Toast Positioning

Positioning is key to effective toast notifications. Bootstrap provides utilities to control toast placement.

Examples and Explanation

Top-Right Position

<div class="position-fixed top-0 end-0 p-3">

    <div class="toast">

        <div class="toast-body">Top-right positioned toast.</div>

    </div>

</div>

Explanation: The position-fixed, top-0, and end-0 classes position the toast in the top-right corner of the viewport.

Bottom-Center Position

<div class="position-fixed bottom-0 start-50 translate-middle-x p-3">

    <div class="toast">

        <div class="toast-body">Bottom-center positioned toast.</div>

    </div>

</div>

Explanation: The start-50 and translate-middle-x classes centre the toast horizontally at the bottom.

Stacked Toasts

<div class="position-fixed bottom-0 end-0 p-3">

    <div class="toast mb-2">

        <div class="toast-body">First Toast</div>

    </div>

    <div class="toast">

        <div class="toast-body">Second Toast</div>

    </div>

</div>

Explanation: Multiple toasts can be stacked by adding margins between them.