Bootstrap dropdown inside button

Question

I am trying to create a dropdown menu in the middle of my page. I followed the guide to center it, but the dropdown menu keeps being placed in the button.

Here is the code:

<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" id="timezoneDropdown" data-bs-toggle="dropdown"
        aria-expanded="false">
        What timezone are you in?
    </button>
    <ul class="dropdown-menu" aria-labelledby="timezoneDropdown">
        <li><button class="dropdown-item">GMT</button></li>
        <li><button class="dropdown-item">UTC</button></li>
        <li><button class="dropdown-item">ECT</button></li>
        <li><button class="dropdown-item">EET</button></li>
        <li><button class="dropdown-item">ART</button></li>
        <li><button class="dropdown-item">EAT</button></li>
    </ul>
</div>

Answer 1

I used your code and it works perfectly as a drop down menu entirely as it should. I added a wrapper around the btn-group to get the centering that you mentioned.....

<div class="d-flex justify-content-center">
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" id="timezoneDropdown" data-bs-toggle="dropdown"
            aria-expanded="false">
            What timezone are you in?
        </button>
        <ul class="dropdown-menu" aria-labelledby="timezoneDropdown">
            <li><button class="dropdown-item">GMT</button></li>
            <li><button class="dropdown-item">UTC</button></li>
            <li><button class="dropdown-item">ECT</button></li>
            <li><button class="dropdown-item">EET</button></li>
            <li><button class="dropdown-item">ART</button></li>
            <li><button class="dropdown-item">EAT</button></li>
        </ul>
    </div>
</div>