How do I build a dropstart menu that aligns with right edge of a button group?

Asked on Aug 31, 2025

1 Answer

To create a dropstart menu that aligns with the right edge of a button group in Bootstrap 5, you can use the `btn-group` class along with the `dropdown-menu-end` class. This setup ensures the dropdown menu opens to the left of the button group.

<!-- BEGIN COPY / PASTE -->
        <div class="btn-group">
            <button type="button" class="btn btn-secondary">Button</button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <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 `btn-group` class groups the button and dropdown together.
The `dropdown-toggle-split` class creates a split button dropdown.
The `dropdown-menu-end` class aligns the dropdown menu to the right edge of the button group.
Ensure you have included Bootstrap's CSS and JS files for the dropdown to function.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions