Bootstrap Dropdown Button Changes Position

Question

I was following the documentation found here: https://getbootstrap.com/docs/4.1/components/dropdowns/ and added the following dropdown button:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
</div>

The issue I'm having is that when the button is clicked on to display the dropdown-menu, the button changes it's position. This happens with both dropdown buttons I have.

Buttons Without Dropdown Clicked

Dropdown Clicked & Button Changed Position Example 1

Dropdown Clicked & Button Changed Position Example 2

You can see example code of this issue occurring: https://codepen.io/danfuentes/pen/MWaYOgz

How can I get it so that the button stays in place with the menu items appearing below it?

Answer 1

You will need to provide the HTML that surrounds the button element along with the css for all of those elements.

Can you update your question with this information so that we can see what's going on beyond just the button tag?

Update after seeing codepen:

You had a couple of div tags in the incorrect place, please see below for the solution:

 <div class="btn-group">
 <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <a class="dropdown-item" href="#">Dropdown tesdt</a>
      <a class="dropdown-item" href="#">Dropdown 2</a>
      <a class="dropdown-item" href="#">Dropdown 3</a>
      <a class="dropdown-item" href="#">Dropdown 4</a>
      <a class="dropdown-item" href="#">Dropdown 5</a>
    </div>
</div>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 2</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <a class="dropdown-item" href="#">Dropdown 1</a>
      <a class="dropdown-item" href="#">Dropdown 2</a>
      <a class="dropdown-item" href="#">Dropdown 3</a>
      <a class="dropdown-item" href="#">Dropdown 4</a>
      <a class="dropdown-item" href="#">Dropdown 5</a>
    </div>
  </div>

      <button type="button" class="btn btn-primary" onclick="#">Regular Button 1</button>
    <button type="button" class="btn btn-primary" onclick="#">Regular Button 2</button>
</div>

Basically you want to wrap all of your buttons within a single div with a class of "dropdown".

The dropdown class declares the css position:relative which will ensure the positioning is correct for the dropdowns to display correctly without shifting other elements on the page around.

Update 2: I've updated the HTML above to resolve the new problem you encountered. You will need to wrap the individual dropdowns in div's with the class of "dropdown" to ensure they can have individual links. To make sure they do not shift from their intended positions all of the buttons are now wrapped in a div with the class of "btn-group".

The "btn-group" class ensures the position is set to relative however by default it introduces a few other styling quirks such as removing the spacing between the buttons. In order to override this I've also added the following to the css:

button {
  margin: 10px !important
}

The above grabs all buttons on the page and gives them an all-round margin of 10px.

If you want to overwrite any bootstrap class stylings you will need to set the.important property on those elements.

Codepen with the solution:

https://codepen.io/pen/pojvprg

Answer 2

Surround your elements in a parent div element with btn-grp class like so:

<div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>