How do I position a dropdown so it never overflows the viewport?

Asked on Aug 30, 2025

1 Answer

To ensure a dropdown never overflows the viewport in Bootstrap 5, you can use the `data-bs-display` attribute with the value `static` and apply the `dropdown-menu-end` class to align it properly. Here's a basic example:

<!-- BEGIN COPY / PASTE -->
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
                Dropdown button
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `data-bs-display="static"` attribute ensures the dropdown does not automatically close when clicking inside it.
The `dropdown-menu-end` class aligns the dropdown to the right edge of the button, helping prevent overflow.
Ensure your dropdown is within a container that has sufficient space to avoid overflow issues.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions