To understand the issue with the button element, you need to share the HTML structure surrounding it and the corresponding CSS styles.
Kindly update your question with this additional information so that we can provide a better solution than just analyzing the button tag alone.
Post reviewing the codepen snippet:
I noticed some misplacement of div tags. Here's how you can correct it:
<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 Text</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>
The key fix is to enclose all buttons within a single "dropdown" div.
The "dropdown" class applies css position:relative for appropriate dropdown display without disrupting other page elements.
Update 2: I've revised the HTML above to address the latest issue encountered. Each dropdown must now be enclosed in a div with the "dropdown" class to support individual links. To maintain their positioning, all buttons are now wrapped in a "btn-group" div.
The "btn-group" class sets position to relative but may cause styling issues like removing spacing between buttons. To counter this, I've added the following CSS rule:
button {
margin: 10px !important
}
This rule assigns a 10px margin to all buttons on the page.
If you need to override any bootstrap class styles, remember to use the !important property on those elements.
Here's the corrected codepen link:
https://codepen.io/pen/pojvprg